Markdown写作语法
编写博客需要使用Markdown,因此需要熟记语法规则,虽然Markdown语法比较少,但是一个一个查起来也是很蛋疼的(目录被标题的预览搞乱了。。。)
常用的Markdown语法规则有:
- 标题(我把标题扔到网页最后面了,目录被打乱了。。。)
- 字体加粗倾斜
- 引用
- 分割线
- 图片
- 超链接
- 列表
- 表格
- 代码
- 小文本
- 特殊字符转义
- 字体颜色大小
- 文本居中
- 勾选框
- 首行缩进
- 链接到其他文章
- 文字背景色
- 标签
- 选项卡
- 按钮
字体加粗倾斜
字体倾斜需要在文本两端各加一个*
号
字体加粗需要在文本两端各加两个*
号
字体同时倾斜加粗需要在文本两端各加三个*
号
字体加入删除线需要在文本两端各加两个~~
示例
1 | *倾斜的文字* |
预览效果
倾斜的文字
加粗的文字
倾斜加粗的文字加删除线的文字
++加下划线的文字++
引用
引用需要在文本前加一个>
,引用可以嵌套,比如两个>>
或三个>>>
示例
1 | > 引用的文本 |
预览效果
引用的文本
嵌套的引用文本
再次嵌套的文本
分割线
分割线使用连续三个及以上的*
或-
实现,前后都有段落时各空出一行
示例
1 | *** |
预览效果
图片
使用链接形式插入图片
语法
1 |  |
其中图片alt
为图片下面的文字,相当于注释,图片url
为图片的地址,图片title
为鼠标悬浮到图片上显示的内容,此项选填
超链接
超链接形式和图片类似,删掉前面的!
即可
普通链接方法
语法
1 | [超链接名称](超链接地址 超链接title) |
超链接title
选填,鼠标悬浮时显示
示例
1 | [Github](https://github.com github) |
预览效果
[Github](https://github.com Github)
高级链接方法
示例
1 | 使用1作为变量 [Github][1] |
预览效果
使用1作为变量 [Github][1]
在末尾为1赋值
[1]:https://github.com
列表
列表分为有序列表和无序列表,都可以嵌套,嵌套时在下一个列表前加Tab
或加三个空格
其中有序列表使用符号*
或+
或-
即可
示例
1 | - C |
预览效果
- C
- C++
- Java
- 嵌套1
- 嵌套1
- 嵌套3
- 嵌套1
C
C++
Java
嵌套1
- 嵌套2
- 嵌套2(1)
- 嵌套2(2)
- 嵌套3
- 嵌套3(1)
- 嵌套2(3)
嵌套1(1)
表格
示例
1 | 表头|表头|表头 |
其中第二行表示对齐方式
- 默认为左对齐,只写
-
- 居中为
:-:
- 右对齐为
-:
预览效果
表头 | 表头 | 表头 |
---|---|---|
内容 | 内容 | 内容 |
内容 | 内容 | 内容 |
代码
代码使用反引号 ` 表示,反引号是键盘左上角的~
键输入,而不是键盘右边的引号
连续三个反引号可以生成代码块,代码块后面的字符表示不同的语言类型,示例中多打了括号
示例
1 | `Hello World!` |
预览效果
Hello World!
1 |
|
代码块语言说明
三个反引号后面的语言格式说明
语言 | 格式 |
---|---|
Bash | bash |
C# | cs |
C语言 | cpp |
CSS | css |
DOS | dos |
Go | go |
HTML | xml |
ini | ini |
Matlab | matlab |
Markdown | markdown |
makefile | makefile |
Json | json |
Java | java |
JavaScript | js / javascript |
Objective-C | objectivec |
PHP | php |
PowerShell | powershell |
Processing | processing |
Python | python |
R | r |
Ruby | ruby |
SQL | sql |
Swift | swift |
TeX | tex |
VBScript | vbscript |
VB.Net | vbnet |
Vim Script | vim |
小文本
在文本两端分别加入<small>
和</small>
即可生成小文本
示例<small>小文本</small>
预览效果
小文本
转义
在使用一些特殊符号(如#
)时需要在符号前加\
进行转义,否则符号不会正确显示
示例
1 | \# |
预览效果
#
*
!
+
-
特殊转义
部分特殊字符需要使用字符串转义
特殊字符 | 转义符号 | 中文名称 | 英文名称 |
---|---|---|---|
! | ! | 感叹号 | Exclamation mark |
" | " " | 双引号 | Quotation mark |
# | # | 数字标志 | Number sign |
$ | $ | 美元标志 | Dollar sign |
% | % | 百分号 | Percent sign |
& | & & | 与 | Ampersand |
' | ' | 单引号 | Apostrophe |
( | ( | 小括号左边部分 | Left parenthesis |
) | ) | 小括号右边部分 | Right parenthesis |
* | * | 星号 | Asterisk |
+ | + | 加号 | Plus sign |
< | < < | 小于号 | Less than |
= | = | 等于符号 | Equals sign |
- | - − | 减号 | Minus |
> | > > | 大于号 | Greater than |
? | ? | 问号 | Question mark |
@ | @ | 艾特 | Commercial at |
[ | [ | 中括号左边部分 | Left square bracket |
\ | \ | 反斜杠 | Reverse solidus (backslash) |
] | ] | — 中括号右边部分 | Right square bracket |
{ | { | 大括号左边部分 | Left curly brace |
| | | | 竖线 | Vertical bar |
} | } | 大括号右边部分 | Right curly brace |
  |   | 空格 | Space |
字体颜色大小
- Hexo只支持黑色字体,可以使用Html语言调整颜色,使用
<font color="ff0000">
和</font>
包裹需要变色的字体,ff0000
可以替换为其他颜色代码。 - 字号同样使用Html语言调整,使用
<font size=12>
和</font>
包裹需要改变大小的字体,font size=
后是调整的字号。 - 字体同样使用Html语言调整,使用
<font face="华文彩云">
和</font>
包裹需要改变的字体,font face=
后是调整的字体名称。 - 颜色字号字体三者可以叠加使用
示例
1 | <font color="ff0000">这是红色字</font> |
预览
这是红色字
这是2号字
这是华文彩云字
这是2号红色华文彩云字
字体居中
字体居中同样使用Html语言包裹,有三种格式
示例
1 | {% centerquote %}这是居中字体{% endcenterquote %} |
预览
这是居中字体
这是居中字体
这是居中字体
勾选框
一种类似todo list的东西
示例
1 | - [ ]这是勾选框 |
预览
- [ ]这是勾选框
首行缩进
Hexo会把缩进的空格忽略掉,所以需要使用转义来进行首行缩进
示例
1 |   这是首行缩进的文本 |
预览
  这是首行缩进的文本
链接到其他文章
Hexo支持引入其他文章链接,语法为{% post_path slug %}
和{% post_link slug [title] %}
,其中slug
是要引用markdown的文件名,title是引用文章的标题
1 | {% post_link Hexo博客踩坑指北 [Hexo博客指北] %} |
预览
[Hexo博客指北]文字背景色
文字背景色需要使用Html表格设置,在bgcolor
后设置文字背景色,使用颜色英文名
预览
1 | <table><tr><td bgcolor=lightblue>背景色yellow</td></tr></table> |
示例
亮蓝色背景色 |
Note标签
配置
需要在Next主题配置文件中选择样式,打开_config.yml
并搜索Note tag (bs-callout)
,下面是我的配置,style
共有五种,预览可以在这里查看,icon
用于设置是否显示图标
1 | # Note tag (bs-callout) |
用法
使用<div>
包裹需要显示的内容,class
后面显示note的风格,加上no-icon
可以隐藏图标
示例
1 | <div class="note default"><p>default</p></div> |
预览
default
primary
success
info
warning
danger
Label标签
在@
前调整label的风格,@
后输入显示的内容
示例
1 | {% label [email protected]这是default %} |
**预览
这是default 这是primary 这是success 这是info 这是warning 这是dangerTab tag选项卡
配置
在Next主题文件中搜索Tabs tag
,然后将enable
设置为true
,下面是我的配置
1 | # Tabs tag |
用法
自定义的选项较多
示例
1 | {% tabs First unique name %} |
预览
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例
第一行的数字3表示默认显示的Tabs,设置为-1时表示不显示默认Tabs
1 | {% tabs Second unique name, 3 %} |
预览
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例
选项的名称和图标可以自定义,在<!-- tab 自定义名称@自定义图标 -->
中调整
1 | {% tabs Third unique name %} |
预览
This is Tab 1.
This is Tab 2.
This is Tab 3.
按钮
示例
使用button
或者btn
,在两者后面加入要跳转的链接,不加链接的话默认跳转到当前页面
1 | //只显示文字,Text是文字内容 |
预览
只显示文字
多个按钮并列
主页 Text & Title只显示图标
显示文字和图标
Text & Icon (buggy) Text & Icon (fixed width)
插入音乐/视频
因为Github Page提供的空间有限,音乐和视频建议上传到B站或Youtube等平台,通过Html语言嵌入,直接复制网页提供的分享链接即可,使用width
设置宽度,height
设置高度
<video>
标签
使用source src
设置视频路径
示例
1 | <video width="480" height="320" controls> |
预览(并没有视频)
<embed>
标签
示例
1 | <embed src='http://player.youku.com/player.php/sid/XMzUzNjg1OTQzNg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed> |
预览(随便放的)
<iframe>
标签
示例
1 | <iframe height=400 width=600 src="//player.bilibili.com/player.html?aid=14176961&cid=23141262&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> |
预览(自己的B站软广)
下面的链接是通过网页端的分享 - 嵌入代码获取的,直接复制就行
插入图片
步骤如下
- 安装图片插件
- 在博客根目录中运行Git bash
- 输入命令
npm install hexo-asset-image
等待安装完成
- 修改配置文件
- 打开博客根目录的
_config.yml
- 搜索
psot_asset_folder
并将其设置为true
- 打开博客根目录的
- 使用方法
- 使用命令
hexo new "title"
创建新博文时会生成一个同名文件夹 - 将要插入的图片放入同名文件夹中
- 使用markdown格式引入图片,下面三种都可以,最后一种可以通过后面的数字控制大小
1
2
3

{% img full-image /博客标题/图片名.JPG 180 180 图片名 %} - 运行
hexo s
即可本地查看效果
- 使用命令
格式
示例
1 |  |
预览

一点微小的工作
Next主题默认会在图片四周生成一圈灰色边框影响美观,对此需要修改博客目录\themes\next\source\css\_common\components\post
中的post-expand.styl
文件。
在文件中搜索img
,并将其修改为
1 | img { |
重新部署后灰色边框就会消失
注意
图片后缀大小写要匹配
标题
在文字前加#
和空格,支持六级标题和大小标题,一定不要漏了 空格,空格漏掉的话会和普通字符一样显示
示例
1 | # 一级标题 |
预览效果
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
大标题
小标题
完成
Hexo中常用的Markdown语法大概就这些了,填坑结束~