Markdown 基础教程
基础功能
什么是Markdown
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档
Markdown 是一种轻量标记语言,通过简单的语法,使普通文本具有一定的格式。文件后缀名一般为.md
、.markdown
插入标题
Markdown标题有两种写法
在文字下方输入
-
或=
构成的线;
1 | 我展示的是一级标题 |
效果预览:
在文字前面插入
#
号,内容前面要有空格与#
隔开:
1 | # 一级标题 |
效果预览:
段落格式
Markdown 换行挺讲究,会发现在编写的时候直接回车换行发现不生效,那怎么办呢?
在段落最后使用加入
<br>
标签实现换行
1 | 段落1<br> |
段落最后
按两次回车
,直接隔一行写
1 | 段落1 |
字体效果
改变字体形态的相关写法
粗体和斜体使用的是 *
(星) 号和 _
(下划线) 符号,符号数量不同效果不同
下划线可以通过 HTML 的 <u></u>
标签来实现
删除线只需要在文字的两端加上两个波浪线 ~~
即可
1 | *斜体文本* |
效果预览:
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本带删除线文本
带下划线文本
分隔线
在一行中使用三个及以上的星号 *
或 -
或 _
即可生成分隔线
生成的分隔线样式根据主题而定
1 | *** |
效果预览:
列表
Markdown 支持有序列表和无序列表
无序列表:使用 *
或 +
或 -
都可以,符号与内容要有空格隔开
有序列表:直接 数字
+ .
即可,符号与内容要有空格隔开
1 | * 无序列表项1 |
效果预览:
列表嵌套写法:
直接在第二行按 Tab 键或按四下空格缩进一下即可
1 | 1. 第一项: |
效果预览:
引用区块
在文本前面添加
>
符号即可将文本变为引用区块
1 | > 文本内容 |
效果预览:
代码
如果是段落上的一个函数或片段的代码可以用反引号
`
把它包起来
1 | `printf()` 函数 |
效果预览:
printf()
函数
代码区块
可使用三个 ` 符号包裹住代码块,并指定一种语言即可生成代码预览区域
此符号一定要在英文状态下才能打出
效果预览:
1 | function monkeyPatch () { |
你也可以在
```
后面指定一种语言(也可以不指定):
效果预览:
1 | $(document).ready(function () { |
网址链接
可直接在文章粘贴你的链接,如果网址太长可以使用格式链接名称
1 | 链接写法1:https://meuicat.com/ |
效果预览:
链接写法1:https://meuicat.com/
链接写法2:广播剧小站
插入图片
图片和链接插入方式都差不多,就是在前面多了个叹号:
![图片描述](图片地址)
,图片描述可写可不写
图片地址可以是网址,也可以是本地文件名(文件需要存在,且路径正确)
在Hexo文章内如何引用本地图片文件:
进入 hexo
的 source/_posts
目录后,会发现一个写文章内容的 .md
文件和一个同名的文件夹,把图片丢进文件夹里面就行
然后直接 ![图片描述](图片文件名)
引用即可
注:如若没有同名文件夹,移步至 hexo
目录里的 _config.yml
内 post_asset_folder
选项设置成 true 即可
1 | 图片写法1:![](baidu.webp) |
效果预览:
图片写法1:
图片写法2:
Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的
<img>
标签
1 | <img src="https://www.baidu.comhttps://img.meuicat.com/posts/2022/7/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.webp" width="50%"> |
效果预览:
表格
Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行
-:
设置右对齐:-
设置左对齐:-:
设置居中对齐
1 | | 左对齐 | 右对齐 | 居中对齐 | 默认对齐 | |
效果预览:
左对齐 | 右对齐 | 居中对齐 | 默认对齐 |
---|---|---|---|
高级技巧
支持 HTML 代码
Markdown是支持HTML且正常识别。因此,可以解锁更多自定义写法
不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写
目前支持的 HTML 元素有: <kbd>
<b>
<i>
<em>
<sup>
<sub>
<br>
等
列如:
kbd - 显示为键盘的按键样式
1 | 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑 |
效果预览:
使用 Ctrl+Alt+Del 重启电脑
转义字符
如果在输出以下字符无法正常输出,可在字符前面加上反斜杠
\
符号
例如我想正常输出*
号,且不会被识别成格式控制符号,可以写为\*
名称 | 字符 | 写法 |
---|---|---|
反斜杠 | \ | \\ |
星号 | * | \* |
反引号 | ` | \` |
下划线 | _ | \_ |
花括号 | { } | \{ } |
中括号 | [ ] | \[ ] |
括号 | ( ) | \( ) |
井号 | # | \# |
加号 | + | \+ |
减号 | - | \- |
点 | . | \. |
感叹号 | ! | \! |
竖线 | | | | |
数学公式
输出数学公式需要对应的插件支持。只需要用
$
符号把公式包裹起来就行。如果是复杂的公式则可以用两个$$
符号
使用 KaTeX 或者 MathJax 来渲染数学表达式
KaTeX 拥有比 MathJax 更快的性能,但是它却少了很多 MathJax 拥有的特性
你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数
1 | 行内公式(适用于简单公式):$ x^2 + \sqrt{y} = z $ |
效果预览:
行内公式(适用于简单公式):$ x^2 + \sqrt{y} = z $
单独占一行(适用于复杂的公式):
$$
\frac{d}{dx}e^{ax}=ae^{ax}\quad \sum_{i=1}^{n}{(X_i - \overline{X})^2}
$$
本主题(Butterfly)是安装了 MathJax 数学插件的,只需要在含有数学公式内容文章或页面的 Front-matter
部分添加 mathjax: true
即可开启公式渲染