hexo下的Mrakdown语法简册

这篇文章用来记录平时常用的一些Markdown（以下简称MD）语法，省得我常常要去百度。

Markdown标准语法

参考：高鸿祥，iTimeTraveler

对于一些非常常用的语法将不再记录。

字体

加粗，一对**号
**加粗**
加粗
斜体，一对*号
*斜体*
斜体
斜体加粗，三对*号
***斜体加粗***
斜体加粗
删除线，两对~号
~~删除线~~
~~删除线~~
下划线
<u>下划线</u>
下划线

引用

在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>>

示例

1
2
3

>这是1层引用
>>这是2层引用
>>>>>这是5层引用

效果
这是1层引用
这是2层引用
这是5层引用

分割线

三个及以上的-或者*

示例
1
2
3
4
5
---
----
***
****
<hr>或<hr/>
效果
—-

图片

语法

![alt](图片地址 "title")

alt：显示在图片下面的文字，相当于对图片内容的解释。
title：是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加

或者：


<div align=位置参数><img width="宽" height="高" src="图片地址" alt="XXX"/><br>图片说明</div>

这种格式会被html解释
位置参数：left, right, center
宽，高：300px
图片说明：显示在图片正下方的文字

示例

1 2	![Intellij Idea](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/IntelliJ_IDEA_Logo.svg/128px-IntelliJ_IDEA_Logo.svg.png 'wiki上的intellij idea图标')

或者：

1
2

// 宽度和高度可以根据显示需要设置绝对值和百分比
<div align=center><img width="200px" height="200px" src="https://www.keka.io/img/Keka-512x512.png" alt="Keka"/><br>Keka图标</div>

效果

Keka图标

超链接

语法

1 2	[超链接名](超链接地址 "超链接title") title可加可不加

或者：

1
2
3

<a href="超链接地址" target="_blank">超链接名</a>

_blank参数能支持链接在新页面打开

示例

1
2
3

[百度](http://baidu.com)

<a href="https://somelou.xyz" target="_blank">我的首页</a>

效果
百度
 我的首页

锚点

语法

初始地：
[显示文字](#目的id)
目的地：
<span id="XXX">显示文字</span>

示例

初始地：
[font](#whereFont)
目的地：
<span id="whereFont">字体</span>

效果
font
目的地设置在了开头“字体”处

角标

语法

上角标：
<sup>文字</sup>
下角标：
<sub>文字</sub>

示例

上角标：
<sup>上角标</sup>
下角标：
<sub>下角标</sub>

效果
上角标^上角标
下角标_下角标

表格

语法

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
- 有一个就行，为了对齐，多加了几个
文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右

注1：原生的语法两边都要用 | 包起来。此处省略
注2：表格不能产生缩进，否则hexo无法渲染

示例

姓名|技能|排行
--|:--:|--:
刘备|哭|大哥
关羽|打|二哥
张飞|骂|三弟

效果

姓名	技能	排行
刘备	哭	大哥
关羽	打	二哥
张飞	骂	三弟

diff代码块

示例

```diff
+ add info
- delete info


* 效果

  ```diff
  + add info
  - delete info

流程图

不是所有markdown编辑器都支持

示例

(```)flow
st=>start: 闹钟响起
op=>operation: 与床板分离
cond=>condition: 分离成功?
e=>end: 快乐的一天

st->op->cond
cond(yes)->e
cond(no)->op
(```)

效果

st=>start: 闹钟响起
op=>operation: 与床板分离
cond=>condition: 分离成功?
e=>end: 快乐的一天

st->op->cond
cond(yes)->e
cond(no)->op

时序图

不是所有markdown都支持

示例

(```)sequence
李雷 -> 韩梅梅: Hello 梅梅, How are you?
Note right of 韩梅梅: 韩梅梅心想
韩梅梅 --> 李雷: I'm fine, thanks, and you
(```)

效果

1
2
3

李雷 -> 韩梅梅: Hello 梅梅, How are you?
Note right of 韩梅梅: 韩梅梅心想
韩梅梅 --> 李雷: I'm fine, thanks, and you

Hexo的语法

参考：hiekay，Christmas

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello
date: 2018/2/9 22:16:13
---

以下是我常用的参数，您可在模板中使用这些参数值并加以利用。

参数	描述	默认值
title	标题
date	建立日期	文件建立日期
permalink	覆盖文章网址字段
top	文章排序（可用于置顶）
tags	标签（不适用于分页）
categories	分类（不适用于分页）
keywords	文章关键字(用于SEO)
typora-root-url	设置文章内图片绝对路径
description	文章描述
image	首页展示图片链接
comments	开启文章的评论功能	true

以下是我的post模板。

---
title: {{ title }}
date: {{ date }}
permalink:
categories:
tags: []
keywords: []
typora-root-url: /Users/xxx/Docs/Blog/somelou.github.io/static/images/{{permalink}}/
description: 
image: 
---
<!-- more -->
##
{% qnimg test/demo.png title:图片标题 alt:图片说明 %}
##

##

<hr/>

主题自带样式note标签

首先要在站点配置文件中配置如下信息：

# Note tag (bs-callout).

note:

# Note tag style values:

# - simple    bs-callout old alert style. Default.

# - modern    bs-callout new (v2-v3) alert style.

# - flat      flat callout style with background, like on Mozilla or StackOverflow.

# - disabled  disable all CSS styles import of note tag.

  style: flat
  icons: true
  border_radius: 3

# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).

# Offset also applied to label tag variables. This option can work with disabled note tag.

  light_bg_offset: 0

示例

//default灰色样式调用方式 
<div class="note default"><p>default</p></div>
//primary紫色样式调用方式 
<div class="note primary"><p>primary</p></div>
//success绿色样式调用方式 
<div class="note success"><p>success</p></div>
//info蓝色样式调用方式 
<div class="note info"><p>info</p></div>
//warning橙色样式调用方式 
<div class="note warning"><p>warning</p></div>
//danger红色样式调用方式 
<div class="note danger"><p>danger</p></div>
//danger no-icon红色无图标样式调用方式 
<div class="note danger no-icon"><p>danger no-icon</p></div>

效果
default
primary
success
info
warning
danger
danger no-icon

文本居中

示例

{% cq %}
人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！
{% endcq %}

或者：

1	<blockquote class="blockquote-center">这个城市的灯火辉煌，与你无关</blockquote>

效果
人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！
这个城市的灯火辉煌，与你无关

自定义数字块

在~/themes/next/source/css/_custom/custom.styl中添加下列代码：

// 自定义的数字块
span#inline-toc {
    display: inline-block;
    border-radius: 80% 100% 90% 20%;
    background-color: rgb(227, 242, 253);
    color: #555;
    padding: 0.05em 0.4em;
    margin: 2px 5px 2px 0px;
    line-height: 1.5;
}

示例
1
<span id="inline-toc">1.</span>
效果
1.

自定义颜色块标签

同样在~/themes/next/source/css/_custom/custom.styl中添加下列代码：

// 颜色块-黄
span#inline-yellow {
  display:inline;
  padding:.2em .6em .3em;
  font-size:80%;
  font-weight:bold;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:0;
  background-color: #f0ad4e;
}
// 颜色块-黑
span#inline-black {
  display:inline;
  padding:.2em .6em .3em;
  font-size:80%;
  font-weight:bold;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:0;
  background-color: black;
}
// 颜色块-绿
span#inline-green {
  display:inline;
  padding:.2em .6em .3em;
  font-size:80%;
  font-weight:bold;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:0;
  background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
  display:inline;
  padding:.2em .6em .3em;
  font-size:80%;
  font-weight:bold;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:0;
  background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
  display:inline;
  padding:.2em .6em .3em;
  font-size:80%;
  font-weight:bold;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:0;
  background-color: #9954bb;
}
// 颜色块-红
span#inline-red {
  display:inline;
  padding:.2em .6em .3em;
  font-size:80%;
  font-weight:bold;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:0;
  background-color: #df3e3e;
}

语法

1	<span id="inline-颜色">颜色块标签内容</span>

示例

<span id="inline-yellow">yellow</span><span id="inline-black">black</span><span id="inline-green">green</span><span id="inline-blue">blue</span><span id="inline-red">red</span><span id="inline-purple">purple</span>

效果
yellowblackgreenblueredpurple

自定义块级框