本文为 8 月 1 日晚上我在连享会平台进行公开课直播分享的文字稿版本。直播主要分享了 Markdown 在学习或学术研究方面的具体使用场景,课件及课程资料已上传至连享会码云平台。分享中使用的课件完全是使用 Markdown 制作的,具体效果如下:

分享中并没有推荐 Notion、Obsidian 等新一代知识管理工具,而是介绍了 VS Code 和 Typora 这样的老牌 Markdown 编辑器,这是因为本次分享的受众为未接触过 Markdown 的新人,而不管是 Notion 还是 Obsidian,其软件整体的体系都较为庞大,功能丰富、可玩性高,我怕相对复杂的界面可能会“劝退”一部分受众,于是还是选择比较纯粹的前者,再加上后文要介绍的 Markdown 转演示文稿的工具 Marp 在 VS Code 里的使用效果最好,因此才定下了 VS Code + Typora 的组合。

何为 Markdown?

Markdown 是一种极轻量的文本标记语言,它是以一种易读易写纯文本方式编排文档,也对代码、图片、公式和表格等支持良好。Markdown,足够轻量,意味着它简单易学,十几分钟便可上手;它以纯文本的方式编排文档,意味着它体积小、很容易迁移与分享。

最关键的是,Markdown 几乎无处不在。在课程笔记、学习讲义的撰写,PPT 文稿制作,博客网站或诸多媒体平台等领域应用很广,是一款性价比非常高的工具。

比如,包含 ChatGPT 在内的几乎所有大语言模型的回答中包含的数学公式和列表等,均为 Markdown 格式;GitHub 和 Gitee 里的论文复现文档,连享会的所有推文历次的课程答疑文档 等也都是用 Markdown 编写的;借助 Marp,可以快速制作幻灯片,效果媲美 LateX Beamer;甚至也有人直接用 Markdown 写书 Bookdown;还有诸多类似 Jupyter Notebook 跨平台编辑器 也都以 Markdown 为主要语法。

文章要点

  • 认识 Markdown:Markdown 基础语法
  • Markdown 的多种用途:课程笔记、PPT、思维导图、博客网站等
  • Markdown 的载体:Markdown 编辑器的介绍及配置
  • Markdown 的使用难点:图片、图床与 PicList
  • Markdown 简化 PPT 制作:Marp 及相关 Themes
  • Markdown 的导出:HTML、PDF 和 Word

1. 认识 Markdown:Markdown 基础语法

Markdown 的基础语法

Markdown 的语法简单易学:

  • 粗体 ****斜体 **删除线 ~~~~
  • 标题 #、分割线 ---、超链接 []()
  • 引用 >、列表 - / 1. 、代码块、脚注 [^1] / [^1]:
  • 图片 ![]() (本地路径、网络路径)
  • 数学公式
  • 表格
  • 表情符号 : : (:pen: / :house: / :books:)
  • 支持 HTML 元素(<br>/<hr>/<b></b>/<i></i>/<kbd></kbd>

Markdown 的图片

上面罗列的基础语法中,插入图片和数学公式这两个,可以详细说一说。

如前所言,Markdown 以纯文本格式编排文档,这就意味着,Markdown 里的「图片」,本质并不是图片,而是一串路径。Markdown 源码可以使用任何一个通用的文本软件打开,比如最简单 Windows 系统自带的记事本,也就是说 Markdown 文档不存储图片,这与 Word 不同,它只是以 ![]() 格式标记该图片的存储路径。

当要在 Markdown 中插入一张存储在本地电脑中的图片时,只需要引用该图片的本地路径,将其放入 ![]() 中的 () 中。该路径可以使绝对路径、也可以是相对路径。比如,在 Typora 中拖放图片,能够直观地感受 Markdown 的图片语法:

看到这儿,想必你可能会有个两个疑问:若是这张存放在本地的图片,有一天突然被移动了、或被删除了怎么办?若想要将 Markdown 源码文件与他人分享,对方那边也能准确显示该图片吗?答案显然是不能的。这就是使用图片本地路径的致命缺陷

你不仅要在本地存储这些图片,而且还要保证图片的位置不被移动、且不被删除。同时,与人分享时,你还要一同发送这些图片,而对方也要对照修改、与 TA 而言图片正确的本地路径,以确保正确引用到这些图片。

这是 Markdown 使用的难点,也阻碍了 Markdown 在「快速记录」领域的应用。关于如何规避使用本地路径,如何将 Markdown 插入图片这一流程更加高效化,我将在本文的第四部分详谈。

Markdown 的数学公式

Markdown 插入数学公式,分为行内公式 $$ 和行间公式 $$..$$$ 符号内部包裹的是 LateX 语法。对于简单的数学公式,可以直接编排,而对于复杂的数学公式,这里推荐 Mathpix Snipping Tool,实现截图 OCR 获取准确的数学公式代码。

Markdown 的详细使用指南,这里推荐三个:

2. Markdown 的多种用途

快速记录课程笔记

下图为我在学习合成控制法这一计量方法时的笔记:

使用二级标题进行不同知识块与知识块之间的区分,通过无序列表进行知识的结构化编排,必要时插入图片直观展示政策效果,还能够优雅地写入和呈现数学公式。

课程笔记不同于论文写作,无需字字落实,目的是快速地将重点内容记录下来,帮助自己日后回顾。使用 Markdown 的列表语法,层次分明,缩进展开后退,可以方便地起到提纲挈领的效果。

借助 Marp 快速制作演示文稿

对于 Marp,推荐几篇文章:

本次讲座的课程幻灯片,就是使用 Marp 制作的,可以最直观地呈现 Marp 的演示效果(本文开头的第一张动图)。

借助 Markmap 快速制作思维导图

VSCode 中安装 Markmap 插件,可以快速将 Markdown 笔记,一键转成结构化的思维导图,便于把握当下写作主题的本质和关键。

撰写学术论文

甚至除了能够快速记录外,Markdown 还可以以这样的纯文本方式,撰写专业的学术论文,然后通过 Pandoc 导出成通用的 Word 或 PDF 格式。不过,这里涉及的细节众多,暂且按下不表,若感兴趣,可以移步我之前的推文浏览。

推荐阅读:
@虹鹄山庄 | 如何使用 Markdown 撰写学术论文 (上)(中)(下)

撰写博客网站的内容

Markdown 支持众多平台,如公众号、知乎、简书、CSDN、GitHub、Gitee、博客网站等(如连享会阳志平的网志)。

如果有经营媒体账号的经验,也可以尝试使用 Markdown 编排内容,这样就将创作与分享的全流程打通了。使用 Markdown 写作,也直接用它经渲染后上传到媒体平台,不需要额外调整格式;最明显是,若图片使用了网络外链,无需再手动上传图片,当你把渲染后的 Markdown 效果粘贴到平台后,图片便可即时呈现。

相比 Word,Markdown 的优势

我们先来回顾一下使用 Word 进行创作的流程。

在 Word 写作中,还需要同时考虑样式的添加。通常完成内容之后,还需要选中内容,点击选项卡添加标题等样式。Word 的格式设置虽然灵活但是繁琐,创作者往往需要花费一定的时间在调整格式上,也就是写作时会被样式干扰、而不容易专注于内容本身。

同时,Word 不适合对知识进行结构化整合,“项目符号”既不好用、又不美观。而且,Word 插入图片,容易导致文件体积过大,软件打开速度慢,并且特定的文件格式 docx/doc 也无法通过其他软件打开。

针对 Word 写作的这些不足,Markdown 在写作的同时、根据规定的标记进行样式的区分,帮助创作者更专注于内容。这便是其与 Microsoft Word 在设计理念上的根本不同。使用 Markdown 的写作,不需要一边写一边不停地调整格式,而是将内容与格式相分离,在更大程度上帮助你仅关注内容创作本身而非表现样式,有利于保持专一的写作思维流。

同时 Markdown 也十分擅长对知识进行结构化编排,比如列表或思维导图,也能快速制作演示文稿 PPT。

总结来看,Markdown 语法简单、易读易写,学习成本大大降低;使用纯文本格式编排文档,易转移、易查看,可以方便地纳入版本控制和团队协作中,也保证了文件体积小、使用通用的文本软件便可查看与编辑。这种「内容与表现相分离」的特性,使作者更专注于文字本身的内容,而非排版,提高了写作的流畅度。Markdown 也并非自娱自乐,它支持多种格式的输出,如 HTML、PDF、Word、PPT、Latex 和图片等。

3. Markdown 的载体:Markdown 编辑器的介绍及配置

Markdown 的内容与表现相分离,意味着其不能所见即所得,创作者写下的只是文本,比如图片就是一串路径而已。那如何将这串路径渲染成图片?或者如果将 # 开头的段落呈现为一级标题呢?Markdown 需要软件加持以渲染呈现效果,这就是 Markdown 编辑器 ↓↓

Markdown 的编辑器众多,除了在线编辑器(如 Markdown Editor),本地编辑器推荐:Visual Studio CodeTypora

Typora

Visual Studio Code

Markdown 的样式是由渲染器决定的。Markdown 文件本身不包含任何关于样式的直接信息。当你将 Markdown 文件转换为 HTML、PDF 或其他格式时,是由 Markdown 编辑器(或渲染器、或解析器) 来决定如何将 Markdown 语法转换为具体的样式。这意味着你可以通过改变渲染器或调整其配置来改变文档的外观,而无需修改 Markdown 源文件本身。这就解释了为什么不同的 Markdown 编辑器对同一份源文档的呈现效果不同,而且编辑器还可以自行选择呈现的主题样式。

4. Markdown 的使用难点:图片、图床与 PicList

如前文第一部分所言,Markdown 中插入图片的语法可以分为:本地绝对路径:![](C:/lianxhopen/img/1.jpg) 或本地相对路径:![](./img/3.jpg)。但本地路径存在管理本地图片库和不便于分享的致命缺陷。

想象一下,如果该图片不是存放在本地,而是存在云服务器上,一来不用管理体积庞大的图片库、二来云端生成的网络外链可以保证 Markdown 文件在分享时的流畅性。

图片存储的服务器,就是图床,它允许对外连接网络,所有人都可以访问。比如,这是一个图片的网络路径:![](https://fig-lianxh.oss-cn-shenzhen.aliyuncs.com/202407261402466.jpg)。我便无需担心对方是否有此张图片,对方拿到 Markdown 源码,无论是谁,一样可以渲染出和创作者一模一样的图片。这是因为网络外链的图片渲染是直接访问云服务器,而非本地电脑。只要云服务器还在正常运行,这张图片就一直可以被人们看到。

图床,分为免费图床和付费图床。免费图床,比较推荐 GitHub、Gitee、SMMS 等。付费图床有腾讯云、阿里云和七牛云等。比如,连享会在用的图床就是阿里云付费图床。本文推荐 Gitee 免费图床,除了一张图片的上传体积不能大于 10M 之外,也几乎没什么缺点了。

图床,简而言之,存储图片的云服务器。有了图床,我们还需要一个将图片上传到服务器的工具,这就是图片上传器,用以快速上传图片并获取图片 URL 链接。这里推荐 PicList

下载并安装 PicList 后,还需要配置 Gitee 图床的相关信息,以便使用该软件快速将图片上传到 Gitee 上,得到一个存放在 Gitee 的图片网络外链。

PicList 不原生支持 Gitee 图床,需要搜索并安装 Gitee 插件,Gitee 插件需要以安装 Node.js为前提,然后重启 PicList,进入 Gitee 图床的配置界面。

PicList Gitee 图床的配置

  1. 注册并登录个人 Gitee 账号
  2. 新建仓库:用于存储图片

    3. 获取 token

进入 Gitee 设置 → 点击左侧私人令牌 → 生成新令牌 → 修改令牌权限 → 提交即可。注意:token 只会明文出现一次,注意保密,尽量不要丢失,否则又要重新生成。

    4. 在 PicList 中进行 Gitee 图床配置

借助 PicList 上传图片的流程

最后来看一下使用 PicList 上传图片的流程,仅仅需要在键盘上按下 4 次快捷键,F1EnterCtrl + Shift + PCtrl + V

使用截图软件 Snipaste,按住快捷键 F1(Snipaste 的默认截图快捷键)截图,然后按 Enter 将图片保存到剪贴板上,再同时按下 Ctrl + Shift + P 即可图片上传到 PicList 配置好的图床中,并将该网络连接返回到剪贴板,最后只需 Ctrl + V 粘贴到 Markdown 文档中即可。整个流程十分丝滑,一两秒钟就能实现 Markdown 快速插图的过程。

5. Markdown 简化 PPT 制作:Marp

前提是安装 VSCode 插件:Marp。值得注意的是,Marp 与 Markdown Preview Enhaced 插件不兼容,原因是 MPE 会劫持并隐藏 VSCode 自带的侧边栏预览,导致 marp: true 无效,因此在使用 Marp 时需要手动关闭 MPE 插件。

以下是 Marp 的基本用法:

--- # 页面分隔符
marp: true   # 开启 Marp
headingDivider: 2 # 以二级标题分割页面
theme: gaia # 三种官方内置主题:default gaia uncover
<!-- paginate: true --> # 显示页码
<!-- footer: :mortar_board:初虹 | :calendar:2024年8月 | :mag_right:连享会 --> # 页脚设置

# 命令置于文档开头的 YAML 区:对所有页面起效
# 命令置于当前页面内:对该页面及以后页面起效
# 命令置于当前页面内且前置下划线:只对当前页面起效

关于 Marp 的使用,这里举个例子:把一篇笔记快速转成幻灯片。

可以看到,原本的一篇笔记,直接在文档顶端加入一段 YAML 区(使用两段 --- 包裹),通过 marp: true 将幻灯片开启,然后定义幻灯片的展示主题,这里选择了 default,还可以自行选择 gaia 或者 uncover

页面与页面之间的分隔,直接使用 --- 便可。如果整篇文档是以标题的形式进行分页,此时可在 YAML 区以 headingDivider: 2 全局定义,就无需每个页面手动 --- 分隔了;若除了以二级标题分页,还想要以三级标题分页,此时可以 headingDivider: [2, 3] 进行多种标题层级的选择。

headerfooter 可以自定义幻灯片顶部和底部区域的内容,paginate: true 可以在右下角展示页码。

还需要了解的是,在 YAML 区域的调整是针对全局范围的,也就是整篇文档的全部页面都会发生改变。若想要在某个页面及之后添加该效果,则需要进行局部定义,比如将 <!-- paginate: true --> 放置于某个页面中,意味着该页面及之后的所有页面,均可以展示页码,但该页面之前的页面将不会显示页码。另外,若只想要对于某个页面生效,则需要在命令之前增加下划线,如 <!-- _paginate: true --> 代表页码的显示只在当前页面有效。

更具体的 Marp 用法推荐阅读:

而且 Marp 制作 PPT 也不是自娱自乐,它支持导出 html/pdf/pptx/png/jpg 等多种格式,方便与他人分享。

上面提到 Marp 默认提供了三种简洁风格的主题,对于快速制作演示文稿的需求是够用了。但是一来效果不甚美观,二来不少常用的功能并不满足,比如页面分栏、更改主题色等。

我在 default 主题的基础上,设计了一套美观且功能丰富的主题:Awesome Marp。目前 Awesome Marp v1.3 (更新时间 2024 年 1 月 13 日)提供了 6 种主题色(红色 am_red、蓝色 am_blue、绿色 am_green、紫色 am_purple、棕黄色 am_brown 和浅黑色 am_dark)和 38 种自定义样式,已在 GitHub 上收到 400 余个星标。

本篇文档就是 Markdown + Marp + Awesome Marp Themes 的一个直观示例。你无需修改 Markdown 源文件,只要在 YAML 区更改 theme 后面的值便可。比如快速切换不同主题色的效果,就只需要将 theme: am_red 改成 theme: am_purple,这样整篇文档的主题色就由红色即时渲染成了紫色。

推荐阅读:

6. Markdown 的导出:HTML、PDF 和 Word

本文第三部分介绍了两个 Markdown 编辑器 —— VSCode 和 Typora。前者的格式导出,需要配合 Markdown Preview Enhanced 插件 才能导出 PDF 和 HTML 等格式,而 Word 的导出必须安装 Pandoc 本体和 VSCode Pandoc 插件。而 MPE 与 Marp 冲突,因此并不建议在 VSCode 导出 Markdown 文件。

比较推荐使用 Typora 进行导出,因为 PDF 和 HTML 等格式,Typora 原生即可直接导出,不需要再安装其他软件或插件。而 Word 或 LaTeX 等格式的导出,则必须提前安装 Pandoc 本体。还要注意,Typora 默认对行内数学公式不支持,需要在 文件偏好设置MarkdownMarkdown 扩展语法 中,勾选 内联公式

下面是使用 Typora 进行 Markdown 导出 PDF 和 Word 的步骤和效果:

关于 Pandoc,这里可以简单聊两句。Pandoc 被誉为格式转换界的「瑞士军刀」,它支持的格式众多,是一款跨平台、自由开源的命令行界面的标记语言转换工具。很多具有格式转换功能的界面式软件,都在底层内置了 Pandoc。

Pandoc 命令行基本语法也较为简单:

pandoc -f 输入格式 -t 输出格式 输入文件名 -o 输出文件名
# 比如将当前目录下 Markdown 文件转换为 Word 文件
# pandoc -f markdown -t docx test.md -o test.docx

# Pandoc 可自动根据文件名后缀判断文件类型,上述命令可简化
pandoc 输入文件名 -o 输出文件名
# Markdown → Word:pandoc test.md    -o test.docx
# Word → PDF:     pandoc test.docx  -o test.pdf
# Ipynb → HTML:   pandoc test.ipynb -o test.html

复杂的 Pandoc 命令可以实现更专业的效果。比如我在如何使用 Markdown 撰写学术论文 (上)(中)(下)系列推文中,便介绍了利用下面的 Pandoc 命令将 Markdown 文件转化为专业的学术论文。

pandoc -F pandoc-crossref --citeproc `
  --bibliography=ref.bib --csl=ref.csl `  
  --reference-doc=ref.docx -M reference-section-title="参考文献" `
  -M link-citations=true ref.yaml test_paper.md -o test_paper.docx

最后总结

好,最后做个总结。本文主要从以下六个方面,详细分享了如何使用 Markdown 进行快速记录、助力学术研究。

  1. Markdown 基础语法
  2. Markdown 的多种用途
  3. Markdown 编辑器的介绍及配置
  4. 图片、图床与 PicList
  5. Marp 及相关 Themes
  6. Markdown 的导出

整个配置和工作流程如下:

  1. 首先需要熟练掌握 Markdown 基础语法
  2. 下载并配置 Markdown 编辑器:VS Code、Typora
    • 下载并安装 VSCode 及相关扩展(简体中文、Marp、Markmap)
    • 下载并安装 Typora (v1.0 之前)建议使用 Typora 导出
    • Pandoc:方便导出 Word 格式
  3. 图床及 PicList
    • Gitee 建立账户、新建仓库、获取 token
    • PicList 及插件(安装 PicList Gitee 图床插件)
    • Node.js:否则没法安装 Gitee 插件
  4. Marp 的使用及主题配置
    • 好用的 Marp 主题:Awesome Marp
  5. 其他小工具:Mathpix Snipping ToolSnipaste

以上就是本文的所有内容,Markdown 的适用于课程笔记、讲义、演示文稿和教程文档等多种场景,如果看完能激发你想要试一试的欲望,那就最好了~ 若有疑问或心得,欢迎交流~