本文记录了书写博文时常用的Markdown语法和Html标签
Markdown官方文档:https://markdown.tw/
https://markdown.com.cn/basic-syntax/
推荐阅读:
https://xuxiaoshi.gitee.io/Hexo%E9%97%AE%E9%A2%98-Hexo%E5%86%99%E4%BD%9C%E8%AF%AD%E6%B3%95%E6%8C%87%E5%8D%97/
本博客网站是基于Bamboo主题修改的,以下是Bamboo作者的Markdown语法博客,实现了很多额外的效果。
https://yuang01.github.io/categories/%E5%89%8D%E7%AB%AF/
文本
单行文本
这是一行示例文本,没有任何语法规则。
多行文本
这是第一行,在本行结尾处键入2个空格再回车,即可开启第二行,只键入回车是不会换行的。
这是第二行。
文本缩进与空格
本行采用了1个汉字的缩进,方法为在这句话前面键入一个全角空格。同样地,我们也可以键入多个全角空格实现多层次缩进。
本行采用了4个汉字(即8个字节)的缩进。在前方键入了4个全角空格。
在Markdown的语法中,半角空格无论连续打多少个,都只能产生1个空格,这和Word,记事本等软件的使用习惯截然不同。因此若想在文本中增加大量空隙,可以选择使用连续的全角空格。就 像 这 样。
区块文本
区块文本适用于展示诗歌,名言,代码等内容,语法为在文本段上下使用```包夹,例如:
1 | 这是一段区块文本,能够拥有自己的框框,感觉这句话很重要。 |
此外,使用单个`包夹可以在一行文本内突出某些文字,例如美丽且突出
的我
标题文本
在行首插入1到6个# ,各对应到标题1到6阶,例如:
1 | # 这是一级标题 |
需要注意的是,只有1到4级标题才会被文章目录收录。
以下为Bamboo主题的定制标题样式,依赖额外js代码实现,不属于基础的Markdown语法:
1 | {% title h1, 这是一级标题 %} |
这是一级标题
这是六级标题
这是五级标题
引用
1 | >这是一个块引用 |
这是一个块引用
这是一个二层块引用
返回到第一层
1 | >这是一个块引用 |
这是一个块引用
这是一个二层块引用
这样无法返回到第一层
文本加粗,倾斜,上下标,删除线,下划线,大小号
(MarkDown兼容HTML语言,可直接使用HTML的语法)
在Markdown中只需在文本前后打上星号,即可将包夹的文字加粗或倾斜:
1 | **想要加粗的内容** |
上标和下标的写法:
1 | 这是<sup>上标</sup>和<sub>下标</sub> |
删除线和下划线的写法:
1 | <s>删除线</s>和<u>下划线</u> |
小号文本 正常文本 大号文本:
1 | <small>小号文本</small> 正常文本 <big>大号文本</big> |
文本大小号的标签可以嵌套,例如:
1 | <big><big><big><big><big><big><big>超巨大号文本</big></big></big></big></big></big></big> |
超巨大号文本
以下为不太常用到的文本修饰,属于Bamboo主题的定制样式,依赖额外js代码实现,不属于基础的Markdown语法:
1 | 带 {% emp 着重号 %} 的文本 |
带
带
键盘样式的文本 command + D
密码样式的文本:
超链接
链接到百度
链接到站内页
网络图片
站点icon
跳转到页面内某一位置
1 | [链接到百度](https://www.baidu.com) |
分割线
可以在一行中用三个或以上的星号、减号、下划线来建立一个分割线。例如:
我是分割线上面的文字
我是分割线下面的文字
小图标
想了解小图标更多使用方式,可参考以下教程:
Font Awesome 图标
1 | <i class="fa fa-pencil"></i> 铅笔 |
铅笔
下载
下载变大(33%)
下载两倍大且变成红色
fa-spin 类可以让图标旋转
fa-pulse 类可以使图标以 8 步为周期进行旋转。
文本变色
1 | <font color="red">红色</font> |
变成红色后,我又变成了绿色
文本底色
添加文本底色可以模拟记号笔的效果:
1 | 本文仅适合<font style="background: orange">18岁以上</font>儿童观看 |
本文仅适合18岁以上儿童观看
特殊符号
以下列出了一些特殊符号,可在博文中按需使用
▍▏➥→☛➨☑✔✘✚☷⊙●○⊕◎Θ⊙¤㊣㈱★☆◆◇◣◢◥▲▼⊿◤◥ ▷◁▶◀△◇◆▽▂▃▄▅▆▇██■▓□〓≡ ╝╚╔ ╗╬ ═ ╓ ╩ ┠ ┨┯ ┷┏┓┗┛┳⊥『』┌ ┐└ ┘∟↑↓→←↘↙┇┅ ﹉﹊﹍﹎╭ ╮╰ ╯∵∴‖︴﹏﹋﹌〖〗·≈~※∪∈の℡§∮ξ№∑⌒ζω*≮≯ +-×÷±/=∫∝ ∧∨∏‖∠≌∽Ψ〓¥〒¢£♀♂√∩¤≡①②③④⑤⑥⑦⑧⑨⑩⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂⒃⒄⒅⒆⒇
左右对齐,居中
1 | Mr.Cindy,你好: |
Mr.Cindy,你好:
图表
列表
1 | 1. 第一项: |
- 第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
- 第一项嵌套的第二个元素嵌套的第一个元素
- 第一项嵌套的第二个元素嵌套的第一个元素嵌套的第一个元素
- 第一项嵌套的第二个元素嵌套的第一个元素
- 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第一个元素嵌套的第一个元素
- 第二项嵌套的第二元素
- 第二项嵌套的第一个元素
表格
1 | |水果|颜色|甜度|价格| |
水果 | 颜色 | 甜度 | 价格 |
---|---|---|---|
草莓 | 红色 | ★ | 160 |
葡萄干 | 紫 | ★★★ | 5000 |
默认对齐 | 居中 | 左对齐 | 右对齐 |
(在手机浏览器不生效?博主也发现了这个问题)
选项卡
1 | {% tabs tab-id %} |
栏目1的内容
栏目2的内容
时间线
1 | {% timeline %} |
完成了工作A
工作B继续延期
工作B决定延期
进行工作A
进行工作B
多媒体
图片
网络图片
1 | <img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="50%" height="50%" /> |
效果:
本地图片
网站小窗
1 | <iframe name="斗鱼首页" width="100%" height="540px" frameborder="0" src="https://www.douyu.com/"></iframe> |
效果:
视频
引用视频源
该方式引用视频无法在markdown编辑软件中实时预览
1 | {% video https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %} |
效果:
换用<video>
标签的方式则可以实时预览
1 | <video width="480" controls loop align-items: center src="https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4" /> |