Skip to content

Markdown 进阶

约 3652 个字 55 行代码 预计阅读时间 13 分钟

本文涵盖 Markdown 的进阶用法：变量、扩展文本格式与显示效果、转义、空格换行、嵌入、LaTeX 数学公式。

10. 变量


10.1 网页链接变量

  • 网页链接变量 的格式： 1. 首先输入
    • [显示文本内容] + [变量名]
    • 变量名可以自己取，没啥限制，任意字符都可以 2. 在文档任意一个区域，输入：
    • [变量名] + : + 空格 + 链接地址 （这个空格 不打也没事)
[百度一下，你就知道][度娘]
[知乎-有问题，就会有答案][知乎]

<!-- 这里是变量区域 -->
[度娘]: http://www.baidu.com 
[知乎]: https://www.zhihu.com

示范

[百度一下，你就知道][度娘]

[知乎-有问题，就会有答案][知乎]


10.2 脚注

  • 脚注 的格式：
  • 在需要脚注的地方，输入：
    • [^脚注代号] ( 脚注代号会直接显示在渲染界面 )
    • 脚注代号可以随便命名，不过推荐使用 数字序号
  • 在其他区域，输入：
    • [^脚注代号] + : + 空格 + 脚注内容 （这个 空格 不打也没事)
鲁迅原名是什么[^1] ，浙江哪里人[^2]

<!-- 这里是变量区域 -->
[^1]: 周树人
[^2]: 绍兴人

示范

鲁迅原名是什么[1]，浙江哪里人[2]



11. 拓展文本格式标记

  • Markdown 想实现更多的文本显示效果，只能依赖HTML标记实现
  • 个人不是很推荐在 MD 中使用 HTML，不过一些简单的标记还是可以 轻度使用 的


11.1 键盘文本

  • 键盘文本的 格式：
  • <kbd>键盘文本</kbd>

  • <kbd>Ctrl</kbd> + <kbd>X</kbd>

  • 效果：

  • 键盘文本

  • Ctrl + X ( 剪切 )

  • 说明：

  • 键盘文本也不一定非得是键盘按键，也可以作为着重文本突出显示

    • 效果： 这也算一种着重文本的方式

11.1.1 加粗键盘文本

  • 加粗键盘文本的格式有两种：

    • <kbd>**键盘文本**</kbd>
    • **<kbd>ctrl + x</kbd>**

  • 效果：

    1. 键盘文本
    2. ctrl + x


11.2 放大文本

  • 放大文本 的格式：

  • 这是一段普通文本 <big>这是一段放大文本</big>

  • 效果：

    • 这是一段普通文本 这是一段放大文本

11.2.1 放大粗体文本

  • 放大加粗文本的格式有两种：
    1. **<big>这是一段放大粗体文本</big>**
    2. <big>**这是一段放大粗体文本**</big>
  • 效果：
    1. 这是一段放大粗体文本
    2. 这是一段放大粗体文本


11.3 缩小文本

  • 缩小文本 的格式：
  • 这是一段普通文本 <small>这是一段缩小文本</small>
  • 效果：
  • 这是一段普通文本 这是一段缩小文本

11.3.1 缩小斜体文本

  • 斜体缩小文本 的格式有两种：
    1. <small>*这是一段缩小斜体文本*</small>
    2. *<small>这是一段缩小斜体文本</small>*
  • 效果：
    1. 这是一段缩小斜体文本
    2. 这是一段缩小斜体文本


11.4 多彩文本

  • 多彩文本 的格式：
  • <font color=orange>这是一段橘色文本</font>
  • 效果：
  • 这是一段橘色文本


11.4.1 多彩粗体文本

  • 只需要在上面示例的基础上，加上 加粗标识符，有两种格式：
    1. 格式1： **<font color=teal>这是一段加粗的水鸭色文本</font>**
      • 效果： 这是一段加粗的水鸭色文本
    2. 格式2： <font color=teal>**这是一段加粗的水鸭色文本**</font>
      • 效果： 这是一段加粗的水鸭色文本
  • 若上述混搭方法的样式失效 ，可以使用 纯HTML标记
    • 格式： <strong style="color:teal;">这是一段加粗的水鸭色文本</strong> (标记略复杂，不是很推荐)
    • 效果： 这是一段加粗的水鸭色文本


11.4.2 多彩斜体文本

  • 跟多彩加粗文本完全一样，只需把首尾的 ** 换成 * 即可 1. 格式1： *<font color=teal>This is an italic teal text</font>*
    • 效果： This is an italic teal text 2. 格式2： <font color=teal>*This is an italic teal text*</font>
    • 效果： This is an italic teal text


11.4.2 多彩粗斜体文本

  • 首尾换成 *** 1. 格式1： ***<font color=teal>This is a bold italic teal text</font>***
    • 效果： This is a bold italic teal text 2. 格式2： <font color=teal>***This is a bold italic teal text***</font>
    • 效果： This is a bold italic teal text


注意 多彩文本尽量慎用，Markdown 的核心就是 简洁精炼，注重 实质内容，而非花哨的 颜色样式



12. 拓展文本显示效果

  • 拓展显示效果既不是原生 Markdown语法 支持的，也非 HTML标记，而是部分编辑器 提供的 额外标识符，属于拓展语法，旨在为 Markdown使用者 提供更多样式选择
  • 不同编辑器，支持不一样，这里以 Typora编辑器 为例


12.1 文本高亮

  • 文本高亮 的格式：
  • ==这里是一段高亮文本==
  • 效果：
  • 这里是一段高亮文本


12.2 上标

  • 用一对 ^ 包裹 (Shift+ 6)
  • 格式： x^2^
  • 效果： x2
  • Obsidian 没效果的，可以用后面会讲的 Latex
  • 或者，也可以使用 HTML标记
    • <sup>这里是上标内容</sup>
    • X<sup>2</sup>
  • 效果：
    • X2


12.3 下标

  • 用一对 ~ 包裹 (Shift + `)
  • 格式： H~2~O
  • 效果： H2O
  • Obsidian 没效果的，可以用后面会讲的 Latex
  • 或者，也可以使用 HTML标记
    • <sub>这里是下标内容</sub>
    • H<sub>2</sub>O
  • 效果：
    • H2O


12.4 Emoji 符号

用一对 : 包裹，里面是 Emoji 符号的 语义化文本 ( Typora编辑器 中，输入 : 就会带提示器 )

  • 示例：
    • :smile: :sweat: :cat: :woman_cartwheeling:
  • 效果：
    • 😄 😓 🐱 🤸‍♀️


  • 补充：
    • 不支持上述方式的 MD编辑器或笔记软件，直接用 输入法 输入也是可以的
    • Windows系统 用户 win + . 就可以输入 Emoji 了
    • Obsidian 用户可以安装第三方插件来支持 Emoji 的输入，推荐两个
      1. Emoji Shortcodes
      2. Emoji Toolbar



13. 转义字符

  • 在 Markdown 中，我们 通过 标识符 改变 文本显示效果
  • 现在我们希望它不作为标识符，而是 作为字符本身呈现出来 （不具备改变文本显示效果的功能，只是一个普通字符)
  • 首先我们可以用前面介绍的 代码域 ，因为代码模式的显示效果就是源代码完全一致的
  • 还有一种方法，可以利用转义字符，在这些标识符 前面 加上 反斜线 \ ( 反斜线要紧贴在标识符前面，不能 有 空格 )
    • 原理：
    • \ 的作用是让标识符 转义 变为一个普通字符，完成这个效果后，反斜线会自动隐藏
    • 隐藏后的反斜线仅在源代码界面可见，在渲染界面不可见
    • 反斜线只争对标识符起作用，其他字符添加 \，\ 不会自动隐藏
    • 补充：
    • 如果想给已经被加在标识符前面，会自动隐藏的 \ 显示出来，可以在反斜线前面再加一个 \ ，用它自己来转义自己
      • 示例： 这里紧跟在标识符前面的反斜线\\*会被转义成普通字符显示出来，不会自动隐藏，且这段文件会是斜体*
      • 效果： ** 这里紧跟在标识符前面的 反斜线\会被转义成普通字符显示出来，不会自动隐藏，且这段文件会是斜体


例1 以普通字符显示星号

  • 如何让被一对或多对 * 号 包裹的文本内容，能够正常显示 * ，且文本不改变格式
    • \*这段文本被一对星号包裹，但不会倾斜\*
    • 效果： *这段文本被1对星号包裹，但不会倾斜*
    • \*\*这段文本被2对星号包裹，但不会加粗\*\*
    • 效果： **这段文本被2对星号包裹，但不会加粗**
    • \*\*\*这段文本被3对星号包裹，但它既不倾斜也不加粗\*\*\*
    • 效果： ***这段文本被3对星号包裹，但它既不倾斜也不加粗***


例2 表格内 单元格中的竖杠

  • 在表格中，使用 | 作为单元格的内容，但不会被识别为表格的结构，不会增加额外的单元格
|表头1|表头2|
|-|-|
|这里的文本被\|分隔|这里的文本也被\|分隔|
  • 效果：
表头1 表头2
这里的文本被|分隔 这里的文本也被|分隔


补充 该技巧可用于 Obsidian 表格内 双链的文本修饰

文本修饰：

在 双链[[ ]]内 以 | 引导的内容 - 格式： [[链接的内容|文本修饰]] - 说明： 文本修饰是渲染界面实际显示的文本，便于更好地融入语境

表格内的格式：

在 | 前面加上 \ - [[表格内的链接内容\|文本修饰]]

示例：

|                  表头1                  |                        表头2                        |
|:---------------------------------------:|:---------------------------------------------------:|
| [[#例2 表格内 单元格中的竖杠\|单元格中的竖杠]] | [[#例3 不会变成代码的反引号\|不会变成代码的反引号]] |

效果：

表头1 表头2
[[#例2 表格内 单元格中的竖杠|单元格中的竖杠]] [[#例3 不会变成代码的反引号|不会变成代码的反引号]]


例3 不会变成代码的反引号

使用 转义符号\ 让 反引号` 变成普通字符，不再具有[[#7 1 行内代码|行内代码]]的标识符功能

格式：

\`这段被反引号包裹的内容不会变成行内代码\`

效果：

`这段被反引号包裹的内容不会变成行内代码`


例4 链接中的中括号

在 网页链接 的 显示文本内容 中，使用 中括号 [ ]

  • 在显示文本内容中，在其中一个中括号前面，加上转义符号 反斜杠 \
  • 格式： [链接里的 \[中括号\] 能被正常显示](https://www.runoob.com)
  • 效果： 链接里的 [中括号] 能被正常显示


例5 不是列表的连接符(横杠)

  • 引用一段话，一般会在换行之后，加上 - 出处
  • 因为 - 是标识符，会变成一个无序列表

如下所示：

The Web, the Tree, and the String. 写作之难，在于把网状的思考，用树状结构，体现在线性展开的语句里。 - 史蒂芬·平克

  • 解决方法：
  • 在 - 前面加上 转义符号 \ 
>The Web, the Tree, and the String.
>写作之难，在于把网状的思考，用树状结构，体现在线性展开的语句里。
>\- 史蒂芬·平克   <!-- 加上转义符号 \ , 不会变成无序列表 -->
  • 效果：

The Web, the Tree, and the String. 写作之难，在于把网状的思考，用树状结构，体现在线性展开的语句里。 - 史蒂芬·平克


例6 不是标题的 #

让 # 不被识别为标题标识符

格式：

\# 这里的内容不会被识别为标题

效果：

# 这里的内容不会被识别为标题


例7 不会注释的 \%

在 Obsidian 中 注释是前后各两个 % 号

使用 转义符号\，让 %% 作为普通字符显示出来，不具备注释的功能

  • 格式： \%\%这里的内容可以被显示喔\%\%
  • 效果： \%\%这里的内容可以被显示喔\%\%


例8 木有链接的双链

Obsidian 的双向链格式是2个方括号 [[ ]] (双方)，使用 转义符号\，让 [ ] 不再具有 双链功能

格式：

\[\[这段文本被双方包裹，但不是一个双向链\]\]

效果：

[[这段文本被双方包裹，但不是一个双向链]]


例9 页链接里 显示文本内的 中括号

使用转义符号\，让中括号可以作为显示文本 在[[#5 1 网页链接|网页链接]]中显示出来

格式：

[\[这是一个带中括号的网页链接显示文本，点击会跳转至百度\]](https://www.baidu.com/)

效果：

[这是一个带中括号的网页链接显示文本，点击会跳转至百度]


特殊情况 文本修饰的中括号

文本修饰的 中括号[ ] 不需要使用 转义符号\

示范：

[[#例8 木有链接的双链|[这是一个带中括号的文本修饰]]]

效果：

[[#例8 木有链接的双链|[这是一个带中括号的文本修饰]]]



14. 空格&换行&强制删除


14.1 空格

  • 在一些编辑器或者支持MD的笔记软件里，无论你打多少个空格，它只会显示单个 空格 的距离
  • 可以使用 HTML中 空格 的 字符实体 —— &nbsp;
  • 若要添加 多个 空格，就输入多个 —— &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  • 格式：
  • 这里有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6个空格分隔
  • 效果：
  • 这里有      6个空格分隔


14.2 换行

场景1： - 在一些编辑器或者支持MD的笔记软件里，无论你打多少个 回车，它只会显示单个 回车 的空行间距 - 可以使用之前表格里提到的 <br> 标签，在 单独一行 中使用，增加额外的空行间距 - 如果要增加 多个，就输入 多个 —— <br><br><br><br><br> - #注意 当单独一行使用 <br> 标签的时候，如果前后有标题标识符或者列表标识符，确保 br元素 前后两行都是空白行

格式：

这里是第一段文本

<br><br><br><br><br>     <!-- 这里插入了5个空行间距 -->

这里是第二段文本

效果：

这里是第一段文本






这里是第二段文本



场景2： - 在列表中也可以插入换行符

- 这是一段无序列表
  <br>     <!-- 插入一个空行间距，需单独一行，上下不用预留空格 -->
  这是同一段无序列表中，空一行距离显示的内容
- 这是第二段无序列表

效果： - 这里是第一段无序列表
这里是同一段无序列表中，空一行距离显示的内容 - 这里是第二段无序列表


  • 补充：
  • 有一些MD编辑器或笔记软件，严格遵循MD的换行规则，你敲一个回车是没法换行的，必须在 行末 敲 2个空格，再按回车键
    • 格式：
    • 这里是一段想换行的文本空格 空格 Enter 这是换行后的文本


14.3 强制删除

  • 很多编辑器都有英文标点自动补全功能，自动生成一对，光标落在中间 只想删除前面1个，却会把 一整对 都删掉
  • 在多个列表的嵌套中，也许会遇到一些 无法被删除 的 列表标识符
  • 解决方法： 使用 Shift + Backspace 即可强制删除
    • Bcakspace   ( 退格键 )



15. 嵌入

  • 嵌入都是依赖 HTML标签 实现的，嵌入的都是在线链接格式
    • 如果是本地的，Obsidian 中音频是有自带的可录制的录音机插件的，其他的 音频、视频 直接复制黏贴就可以了，也可以直接拖拽到OB的笔记界面
      • 其他的媒体文件在 Obsidian 也和图片一样，以双链的格式引用在目标笔记中，使用 ! 使它可见


15.1 嵌入音频

  • 格式：

  • <audio controls="controls" preload="none" src="音频链接地址"></audio>

  • 示例：

<audio controls="controls" preload="none" src="https://www.ldoceonline.com/media/english/exaProns/p008-001803372.mp3?version=1.2.37"></audio>
  • 效果：


15.2 嵌入视频

  • 格式：
<video width="600" height="420" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">  
</video>
  • 说明：
  • width ( 宽度 ) height ( 高度 ) ，可以自己设置，直接输入数字即可，单位默认是 px(像素) 也可以使用 百分比 width=100% 代表水平撑满整个窗口 height=50% 代表垂直撑满半个窗口
  • Video标签 支持的视频格式 ：MP4 ogg webm


15.3 嵌入页面

  • 格式： <iframe width=600 height=400 src="页面链接地址" scrolling="auto" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe width=600 height=400 src="https://www.runoob.com/html/html-tutorial.html" scrolling="auto" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
  • 效果：


  • iframe标签 除了嵌入页面，也可以嵌入在线视频，主流的视频网站都会提供嵌入代码
  • 具体可以看这个 iframe视频嵌入教程
  • B站 的视频，得在 // 前面补充 http:

  • 不是所有的 编辑器和笔记软件 都支持这个

  • 示例：

<iframe width=600 height=400 src="http://player.bilibili.com/player.html?aid=20190823&bvid=BV1yW411s7og&cid=32964980&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
  • 宽高设置和前面的 video 一样


  • 效果：



16. Latex 数学公式

  • 主要用于 数学公式 与 化学公式 的书写


16.1 行内公式

  • 格式：

  • \(</kbd>** + 行内公式 + **<kbd>\)


  • 示例：
  • $x^2 + 2x + 5 + \sqrt x = 0$
  • $\ce{CO2 + C -> 2 CO}$
  • $\ce{CO2 + C -> 2 CO}$
  • $\ce{2Mg + O2 ->[燃烧] 2 MgO}$


  • 效果：
    • \(x^2 + 2x + 5 + \sqrt x = 0\)
    • \(e^{i\pi} + 1 = 0\)
    • \(\ce{CO2 + C -> 2 CO}\)
    • \(\ce{2Mg + O2 ->[燃烧] 2 MgO}\)


16.2 公式块

  • 格式：
  • $$ 公式块 $$


  • 示例：
% 化学公式
$$
\ce{Zn^2+  <=>[+ 2OH-][+ 2H+]  $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$  <=>[+ 2OH-][+ 2H+]  $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}
$$

% 麦克斯韦方程组
$$
\begin{array}{lll}
\nabla\times E &=& -\;\frac{\partial{B}}{\partial{t}}   
\ \nabla\times H &=& \frac{\partial{D}}{\partial{t}}+J   
\ \nabla\cdot D &=& \rho
\ \nabla\cdot B &=& 0
\ \end{array}
$$

% 薛定谔方程
$$
i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} \left(\frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2}+\frac{\partial^2}{\partial z^2} \right) \psi + V \psi
$$


  • 效果：
\[ % 化学公式 \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$} \]


\[ % 麦克斯韦方程组 \begin{array}{lll} \nabla\times E &=& -\;\frac{\partial{B}}{\partial{t}} \ \nabla\times H &=& \frac{\partial{D}}{\partial{t}}+J \ \nabla\cdot D &=& \rho \ \nabla\cdot B &=& 0 \ \end{array} \]


\[ i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} \left(\frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2}+\frac{\partial^2}{\partial z^2} \right) \psi + V \psi \]



颜色主题调整