一文讲清楚 Markdown+Typora+Pandoc+图床+PicGo

一、Markdown

1.1 什么是 Markdown ？

Markdown 是约翰·格鲁伯（John Gruber）于 2004 年创建的一种轻量级的文本标记语言（Text Markup Language）。

所谓 文本标记语言 ，就是对文本进行标记（说明）的语言。在标记语言中，规定了一些特殊的符号和标识，用户在编写文本文档时，通过在文本中插入这些特殊的符号和标识，对文本的格式或内容进行一些说明，例如：指定不同级别的标题、使用加粗字体、插入图片、插入表格等。

最有名的文本标记语言当属我们在创建网页时使用的超文本标记语言（HTML，HyperText Markup Language），Markdown 与 HTML 很相似，不过比 HTML 要简单得多。在下面这段添加了 Markdown 标记的文本中，用一个井号 # 和一个空格表示其后的文字是一级标题；用两个井号 # 和一个空格表示其后的文字是二级标题；用一对双星号表示其所包围的文字使用加粗字体；用一对单星号表示其所包围的文字使用斜体。

# 第1章 操作系统基础知识

## 1.1 为什么要使用操作系统 

**加粗字体**    *斜体*

就像用 HTML 创建的网页需要在浏览器中打开（经过浏览器的解析）才能看到效果一样，上面这段添加了 Markdown 标记的文本也要经过 Markdown 解析器的解析（渲染）之后才能看到如下图所示的效果：

1.2 Markdown文档与Markdown编辑器

1、Markdown文档

含有 Markdown 标记的文本文档被称为 Markdown 文档，其后缀名一般是 .md 或 .markdown 。

2、Markdown编辑器

实际上，用任何一款文本编辑器都可以编辑 Markdown 文档，但我们一般所说的 Markdown 编辑器是指那些含有 Markdown 解析器、不仅可以编辑 Markdown 文档，而且能够预览 Markdown 文档实际效果的文本编辑器。

常用的 Markdown 编辑器中既有一些专用的 Markdown 编辑器，如：Typora、MarkdownPad 等，也有通用的文本编辑器，如：微软推出的 VS Code ，它默认集成了 Markdown 文档编辑插件。另外，还有很多网站提供的在线 Markdown 编辑器。

1.3 Markdown 语法

Markdown 语法分为基本语法和扩展语法。需要注意的是，由于目前还没有一个权威机构对 Markdown 的语法进行规范，不同的 Markdown 解析器对 Markdown 扩展语法的支持程度也不尽相同。目前，比较受到认可的是由著名代码托管网站 GitHub 制定的 GFM（GitHub Flavored Markdown）语法 ，而 GFM 则是基于由 John MacFarlane （Pandoc 的作者）制定的 CommonMark Spec 。

网上关于 Markdown 语法的教程非常多，本文不再赘述。如果需要了解或学习 Markdown 语法，给大家推荐以下几个网址：

Markdown Guide

Markdown 官方教程

Typora 的 Markdown 语法 - Typora Support (typoraio.cn)

Markdown 教程 | 菜鸟教程 (runoob.com)

Markdown 指南 - Markdown Guide (niqin.com)

GitHub Flavored Markdown Spec

CommonMark Spec

1.4 Markdown 的特点

在搞清楚了什么是 Markdown 并且对 Markdown 的语法有了一些基本了解之后，就不难感受到 Markdown 的特点：

1、Markdown 的基本语法非常简单，它以非常简洁的方式满足了我们在编辑文档时的一些基本需求。

2、Markdown 编辑器有很多、非常轻量且容易获得，很多网站都支持 Markdown 文档，如：微信公众号、简书、博客园等写作平台；Gitee、Github 等代码托管平台。

3、在没有 Markdown 编辑器的情况下，使用任何一款文本编辑器或浏览器都可以打开 Markdown 文档并获悉文档的内容（尽管看不到 Markdown 文档的实际效果），但无论是 Word 文档还是 PDF 文档都做不到这一点。

4、虽然 Markdown 文档比 TXT 文档强了许多，但 Markdown 提供的功能仍十分有限，如果你对编写的文档有比较复杂的格式或排版方面的要求，比如：选择字体、设置字体大小、插入页眉、页脚和页码等，那么 Markdown 不是你的菜，也许你应该选择 Word、WPS 或 LaTeX 。换句话说，Markdown 的定位只是一把“水果刀”，最好不要企图用它去剁肉，甚至去砍骨头。

综上，基于 Markdown 的特点，我们不难发现：Markdown 比较适合对文档的格式有一定要求但又没有太多要求的场合（轻度排版+重内容的场合），如：公众号文章、博客、技术文档、说明文档、笔记等；Markdown 文档很容易转换成符合规范的 HTML 文档，在 Markdown 文档中还有可以使用一些 HTML 语法去扩展其标记功能，所以 Markdown 特别适合写作网络文档，也就是将编辑好的文档发布到网络上去的情形。

​

二、Typora

Typora 是一款应用非常广泛的、支持实时预览的专用 Markdown 编辑器。

Typora 官网：https://typoraio.cn/

2.1 下载 Typora

直接到 Typora 官网下载。

2.2 安装 Typora

安装过程非常简单，直接双击安装程序（如：typora-setup-x64.exe），按照提示安装即可。

Typora 是收费软件，需要激活才能使用。

2.3 Typora 教程

Typora Support (typoraio.cn)

Quick Start - Typora Support (typoraio.cn)

Typora 的 Markdown 语法 - Typora Support (typoraio.cn)

​

三、Pandoc

Pandoc 是由 John MacFarlane 开发一个开源、免费的命令行工具，用于实现不同标记语言（Markup Language）之间的转换，也就是将文档从一种格式转换成另外一种格式。Pandoc 支持的文档格式众多，堪称文档格式转换领域的瑞士军刀。

当我们需要使用 Typora 的导入/导出功能（【文件】→ 【导入…】/【导出】）实现 Markdown 文档与其他格式文档之间的转换时，就需要借助 Pandoc（版本不低于2.0）来完成。注：在没有安装 Pandoc 时，Typora 只支持将 Markdown 文档导出 PDF、HTML 和图像。

3.1 下载 Pandoc

有两种方式进入下载页面：

• Pandoc官网：https://www.pandoc.org/installing.html
• Github：https://github.com/jgm/pandoc/releases

在本文中，通过 Github 网址进入下载页面，如下图所示：

对于 Windows-x86 平台，下载 pandoc-3.1.12-windows-x86_64.msi 或 pandoc-3.1.12-windows-x86_64.zip 。

注：pandoc-3.1.12-windows-x86_64.zip 是免安装的，解压即可，但需要手动设置环境变量。

3.2 安装 Pandoc

在本文中，使用安装包 pandoc-3.1.11.1-windows-x86_64.msi 在 Win10 系统中安装 Pandoc ，双击安装包，根据提示安装即可。

安装完毕后，在系统的环境变量 Path 中自动添加了可执行程序 pandoc.exe 所在的路径，如下图所示。如果使用的是免安装的压缩包 pandoc-3.1.11.1-windows-x86_64.zip，则需要手动添加可执行程序 pandoc.exe 所在的路径。

打开 Windows PowerShell，执行命令 pandoc -v ，显示版本信息则表示安装成功，如下图所示：

3.3 在 Typora 中配置 Pandoc

按照以下步骤，在 Typora 中配置 Pandoc ：

1、在 Typora 中选择 【文件】→ 【偏好设置…】，打开【偏好设置…】窗口。

2、如下图所示，在偏好设置窗口左侧选择【导出】，然后在导出窗口中选择【通用】，最后设置可执行程序 pandoc.exe 所在的路径。

3.4 Pandoc 教程

Pandoc 是一个命令行工具，如果想系统学习 Pandoc ，可参考官方文档：

• 案例：https://pandoc.org/demos.html
• 入门教程：https://pandoc.org/getting-started.html
• 用户手册：https://pandoc.org/MANUAL.html

​

四、图床

4.1 图床的由来

Markdown 文档中经常需要插入一些图片，可是当我们将编辑好的 Markdown 文档拷贝到某个网站（如：CSDN）的在线 Markdown 编辑器中准备在网上发布时，文档中的图片却经常无法显示，如下图所示：

之所以出现这种状况，大致有以下两种原因：

（1）在 Markdown 文档中插入图片时，使用的是图片的本地链接。一般来说，我们通常无法从网络上随时访问存放在本地电脑上的图片。

（2）图片存放在某个网站上，在 Markdown 文档中插入图片时，使用的是链接也是图片在该网站上的网络链接，但是由于存放图片的网站启动了防盗链机制，所以也无法从第三方站点访问这些图片。

有一种方法可以解决上述问题，就是把 Markdown 文档中的图片逐一上传到要发布的网站上，从而将文档中图片的链接变成图片在该网站中的网络链接。可是，当同一个文档需要在多个网站发布时，按照这个方法，需要将文档中的图片向每个站点都上传一遍，这显然是非常麻烦的。如果需要进一步解决这个问题，就需要用到 图床 。

4.2 什么是图床？

所谓 图床 ，就是 Image Hosting Service（图片托管服务），也可以理解为网络上提供图片托管服务的服务器。用户可以将图片上传至图床进行保存，同时图床向用户返回图片的外链（用于从网站外部访问图片的网络链接），任何第三方站点都可以通过外链查看图片。

有了图床之后，只要将 Markdown 文档中的图片上传到图床并使用图床返回的图片外链，那么同一篇 Markdown 文档在多个网站发布的时候，就不需要再上传文档中的图片了。不过，由于 Markdown 文档中的图片链接是网络链接，所以在本地查看 Markdown 文档时需要联网才能显示图片。

常见的图床如下表所示：

名称	网址	备注
SM.MS	https://smms.app/	国外、免费/收费
阿里云OSS（对象存储服务）	https://www.aliyun.com/product/oss	国内、收费
腾讯COS	https://console.cloud.tencent.com/cos	国内、收费
Github	https://github.com	国外、免费
七牛云-对象存储	https://portal.qiniu.com/kodo	国内、免费/收费

4.3 SM.MS 图床

SM.MS图床分海外和国内，如果海外访问不了，可以通过国内网址进行访问。

#海外网址
https://sm.ms/
#国内网址
https://smms.app/

SM.MS 图床免费版本的详细信息如下图所示：

接下来，以 SM.MS 图床为例，简单介绍一下图床在 Markdown 文档中的使用。

（1）登录 https://smms.app/ ，选择【User】→【Register】，注册一个账号。

（2）登录 https://smms.app/ ，选择【User】→【Login】，登录账号。

（3）登录账号后，在主页【Home】上传图片

（4）图片上传成功后，图床返回在包括 Markdown 在内的多种类型的文档中插入该图片的文本，如下图所示：

（5）将 Markdown 格式的图片插入文本复制粘贴到 Markdown 文档中，如下所示：

（6）选择【User】→【Dashboard】，然后在左侧导航栏中选择【Pictures】，可以查看已上传的图片、查找图片、删除图片、拷贝图片的网络链接。

​

五、PicGo

5.1 PicGo 简介

PicGo 是一款将图片上传至图床并获取图片 URL 链接的工具，可以将其视为用户和图床之间的中间人（代理），通常将这类工具称为图床工具。有了像 PicGo 这样的图床工具，我们在 Markdown 文档中插入图片时，可以实现图片自动上传到图床并使用图片在图床中的网络链接。

PicGo 的官网用户指南：

https://picgo.github.io/PicGo-Doc/zh/guide/

https://picgo.github.io/PicGo-Doc/zh/

5.2 安装 Node.js

由于 PicGo 依赖于 JavaScript 的运行环境（运行时，Runtime）—— Node.js ，所以在安装 PigGo 之前，首先检查自己的电脑是否已经安装了 Node.js （版本≥16），如果没有安装，先安装 Node.js 。

1、到 Node.js 官网下载相应系统的 Node.js 安装包。例如：对应于 Windows 10（64-bit）系统，我下载的是 Windows Installer 64-bit LTS 版本（node-v20.11.0-x64.msi）。

#Node.js官网
https://nodejs.org/en
https://nodejs.org/en/download

2、双击安装包 node-v20.11.0-x64.msi ，开始安装 Node.js ，安装过程如下图所示：

3、安装完成后，在键盘按下【win+R】键，输入 cmd ，然后回车，打开 cmd 窗口。

执行命令 node -v 和 npm -v ，显示版本信息则表示安装成功，如下图所示：

安装完成后的目录如下图所示：

4、若要卸载 Node.js ，执行以下步骤：

（1）通过 Windows 的卸载程序功能卸载 Node.js 。

（2）删除以下路径的内容（若不存在则无须理会）：

• Node.js 的安装路径，如：E:\Program Files\nodejs 。

• 默认全局安装路径，如：C:\Users\用户名\AppData\Roaming\npm 。

• 缓存路径，如：C:\Users\用户名\AppData\Roaming\npm-cache ，C:\Users\用户名\AppData\Local\npm-cache 。

• npm 的配置文件：C:\Users\用户名\.npmrc 。

• 文件：C:\Users\用户名\.node_repl_history 。

（3）删除环境变量：删除用户变量和系统变量下 Path 项中与 node 相关的配置。

（4）重启电脑。

5.3 安装 PicGo

1、下载 PicGo

https://github.com/Molunerfinn/PicGo/releases

https://mirrors.sdu.edu.cn/github-release/1707260135/github-release/Molunerfinn_PicGo

注：本文下载的版本是 PicGo-Setup-2.3.1-x64.exe ，在 Windows 10 系统中安装。

2、双击安装程序 PicGo-Setup-2.3.1-x64.exe ，开始安装 PicGo ，如下图所示：

3、PicGo 启动后的界面如下图所示：

5.4 设置图床

在使用 PicGo 上传图片之前，先要在 PicGo 中设置图床。下面以图床 SM.MS 为例，简单介绍 PicGo 中的图床设置。

1、获取图床的令牌（Token）。

（1）登录 https://smms.app/ ，选择【User】→【Login】，登录账号。

（2）选择【User】→【Dashboard】，然后在左侧导航栏中选择【API Token】，拷贝 Secret Token （注：单击 Generate Secret Token ，可以重置 Secret Token ），如下图所示：

2、打开 PicGo ，在左侧导航栏中选择【图床设置】→【SM.MS】。

（1）将 SM.MS 图床的令牌（Token）粘贴到【设定Token】栏中。

（2）输入 SM.MS 图床的域名：smms.app 。

（3）PicGo 默认使用 SM.MS 图床，否则单击【设为默认图床】按钮，将其设为默认图床。

（4）单击【确定】按钮完成图床设置。

5.4 在 Typora 中配置 PicGo

参考：Upload Images - Typora Support (typoraio.cn)

在 Typora 中使用 PicGo 有以下两个要求：

• PicGo 的版本 ≥ 2.2.0
• PicGo-Server 的监听端口：36677 ，如下图所示：

按照以下步骤在 Typora 中配置 PicGo ：

1、在 Typora 中选择 【文件】→ 【偏好设置…】，打开【偏好设置…】窗口。

2、按照下图所示进行设置。

注：单击【验证图片上传选项】，显示验证失败，但实际可以上传图片。

设置完毕后，当在 Markdown 文档中插入图片时，会自动通过 PicGo 将图片上传到图床，图片链接使用从图床返回的外链。注：从剪切板直接粘贴到 Markdown 文档中的图片在上传之前会先自动保存到文件夹 C:\Users\用户名\AppData\Roaming\Typora\typora-user-images 中。

对于 Markdown 文档中之前插入的本地链接图片，在图片上单击鼠标右键，在弹出的菜单中选择【上传图片】，即可通过 PicGo 将图片上传到图床，图片的链接也自动换成网络链接。

​

​