当你觉得 markdown 做不了一些事的时候,可能其实它可以做到。
由于简书markdown中无法使用html标签,有关html的内容可能无法正常显示。欢迎前往采叶小火的博客查看原文:https://mikelyou.com/2020/04/08/advanced-markdown-skill/。转载请保留此链接。
本文介绍了本人从各处搜集到的 markdown 高级技巧,有一些可能使用起来并不高效,甚至有把简单的markdown复杂化的可能性,但这些用法真的很少人分享,我又想用,所以姑且分享一下我了解的。希望能帮到你。
谁适用阅读本文: 已经可以闭着眼写markdown的人 或 写markdown像写纯文本一样熟练自由的人。
如果你还不熟悉 markdown 语法,推荐以下几个很好的教程:菜鸟教程、GitHub Markdown语法、思否SegmentFault(推荐这个,可玩性较高)。别人已经写得很好了,我就没必要再写啦
在 Markdown 中使用 HTML 元素
Markdown 注释
学过点编程的人可能都有写注释的欲望,一段内容想删但又不舍得,纠结使人头大。而 markdown 本身作为轻量级语言,是没有注释语法的。想要写注释的话,需要使用 html 注释(参考):
<!-- 这是 html 注释, 在 markdown 中也不会被编译, 可以作为注释的方法 -->
输出为:
折叠网页内容
有时候我们希望在博文中折叠部分细节的讨论,这时候可以使用 <summary>
来折叠内容,不过在纯 markdown 编辑器中大概不行。(参考)
<details>
<summary>展开查看</summary>
啊啦~被你发现啦!
</details>
显示如下:
<details>
<summary>展开查看</summary>
啊啦~被你发现啦!
</details>
我喜欢搭配表格使用,这样可以清晰的现实哪些是折叠部分的内容:
<details>
<summary><b>See what's inside ↓</b></summary>
<table border="1">
<tr>
<th><a href="https://www.runoob.com/html/html-quicklist.html">如何使用html元素添加表格</a></th>
</tr>
<tr>
<td>
这个样子<br>
多行内容<br>
不至于让分不清哪里是折叠内容的结束
</td>
</tr>
</table>
</details>
输入如下:
<details>
<summary><b>See what's inside ↓</b></summary>
<table border="1">
<tr>
<th><a href="https://www.runoob.com/html/html-quicklist.html">如何使用html元素添加表格</a></th>
</tr>
<tr>
<td>
这个样子
多行内容
不至于让分不清哪里是折叠内容的结束
</td>
</tr>
</table>
</details>
应该也可以定义 CSS 样式代替表格吧?回头试试,可以的话会好看很多。
其他 HTML 标签
不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。(参考)
目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>
等 ,如:
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
这是一句话,可以<b>粗体</b>或<i>斜体</i>或<em>强调文本</em>,<br>
还能使用<sup>上标</sup>和<sub>下标</sub>。使用<br>换行。
这是一句话,可以<b>粗体</b>或<i>斜体</i>或<em>强调文本</em>,
还能使用上标和下标。使用
换行。
可以使用的应该还有很多,大家可以自己尝试。不过能用 markdown 自身语法实现的功能,比如粗体,就不要使用 html 标签了,否则有种本末倒置的感觉了。应该只有在 markdown 无法实现某个功能是再尝试使用 html 标签。
字符转义
Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符。Markdown 使用反斜杠转义特殊字符,支持以下这些符号:<code></code> <code>`</code> <code>*</code> <code>_</code> <code>{}</code> <code>[]</code> <code>#</code> <code>+</code> <code>-</code> <code>.</code> <code>!</code>.
至于我要怎么写才能把上面一行内容显示在网页上,这又是一个套娃问题,我知道怎么写但不知道怎么把怎么写写出来,看看这个回答大家应该就清楚了。
插入公式
使用一对美元符号$
可以显示公式,双美元符号$$
会使公式单独占一行,公式的语法与 LaTeX 一样。
不过这需要加载 Mathjax 进行渲染。并非所有 markdown 编辑器都拥有这个功能,我所了解的 简书 和 马克飞象 是可以支持公式渲染的。
本博客模板添加了 Mathjax 支持所以可以直接写公式。在 Atom 中需要安装插件,但公式渲染和同步滚动两个功能无法同时实现。
太过复杂的公式可能不太好办,比如那种箭头上下都有文字的化学反应,主要是很难写的好看;不过我觉得一般人都用不到那种,能写个表格矩阵的就够复杂了。我在另一篇博文中讨论了更多关于在博客中的 LaTeX 写作的细节。
公式示例:
小明买了$m$ 跟铅笔,每根 $n$ 元, 那么他一共花了这么多元
$$y = m * n$$
输出如下:
小明买了 跟铅笔,每根 元, 那么他一共花了这么多元
本人水平有限,如有错误或更好的实现方法,欢迎指正!