Markdown 笔记

得益于 Markdown 对 html 的兼容性，很多 html 的语法可以直接嵌套进 Markdown 以增加文本的多样性。

1.Markdown 如何添加文献引用 ¹

markdown 原生支持超链接，比如

这是 Firefox 浏览器的下载页

其格式为

[标题](链接)

注意，Markdown 只渲染最近的一组方圆括号。本部分最后有示例。
接下来可以为上面的内容增加锚点:

<div id="refer-anchor"></div>

[标题](链接)

点击这个浮起来的蓝色小 test^test，就能自动滚动到锚点所在的的位置。语法如下所示。

[<sup>ref</sup>](#id)

2.Markdown 如何生成目录 ²

方法 1，非常简单，在文章开头加入

[TOC]

就好了，大小写不限，但是需要一致。这样生成的目录包含了 Markdwon 语法里面 1~6 个 # 的所有标题，非常方便。缺点是没有对应文章子部分的链接。

20240320 更新：Github 和 Gitee 均不支持 toc，建议本地编辑时使用 markdown all in one create table of contents 命令编写目录。

方法 2，全局安装 doctoc 插件并执行之

npm install doctoc -g
cd ./curentfolder
doctoc whateveryouwant.md

这样可以生成目录链接，更方便跳转，但是需要 npm。

3.Jekyll 环境下语法高亮

博客架构从Jekyll切换到Hexo，本段落不再适用
Jekyll 环境下的 Markdown 文件不能像 Typora 一样有方便的语法高亮，所幸我们还可以这样

\{\% highlight [language] \%\}
\{\% endhighlight \%\}

因为 Jekyll 的识别问题，使用时需要删去上面的所有 “\”。

4. 如何插入2*2的图片框并各自引用

直接复制下面代码

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
    <div style="text-align: center;">
        <img src="path_to_image2.jpg" style="width: 100%;">
        <div>图片1注释</div>
    </div>
    <div style="text-align: center;">
        <img src="path_to_image2.jpg" style="width: 100%;">
        <div>图片2注释</div>
    </div>
    <div style="text-align: center;">
        <img src="path_to_image3.jpg" style="width: 100%;">
        <div>图片3注释</div>
    </div>
    <div style="text-align: center;">
        <img src="path_to_image4.jpg" style="width: 100%;">
        <div>图片4注释</div>
    </div>
</div>
<div style="text-align: center; margin-top: 20px;">
    这是对整个图片组的注释。
</div>

4. 参考

• [1] Markdown 添加文献引用

• [2] markdown 文件生成目录的方式