vlambda博客
学习文章列表

在VSCode上搭建Markdown写作环境


文 / 落小鸢


2017年的时候，我写了《》和《》来讨论 Markdown 的使用。当时 Markdown 还没有现在这么普及，Windows 平台上甚至没有一款趁手的 Markdown 编辑器。时隔5年，Markdown 的生态环境好了很多，一系列优秀的 Markdown 编辑器争先恐后地与大家见面。Markdown 被越来越多的人用于日常写作，我的写作工具也一换再换。从 MWeb 挪到了 typora ，typora 几年的公测结束，开始强制升级收费（如果不是那么强制，我就买了，毕竟好用又跨平台，但它偏要强制，那我就不喜欢了），最近转战到了 VSCode。

花了些时间，查了些热心网友分享的攻略，新的Markdown写作环境搭起来了，写写。


VSCode 本体

VSCode 是一款代码编辑器，拥有丰富的扩展，这也包括对Markdown的支持。与专职于Markdown写作的编辑器相比，VSCode 的明显优势有：

  • 跨平台；

  • 集成布局：大纲（outline）、工作区（workspace）；

  • 公式支持：LaTeX 公式；

  • 扩展丰富：通过扩展，可以集成整合其他工具，使用体验巧克力般丝滑（详见下文的各种扩展）；

对我个人而言的优势有：

  • 可以写 LaTex ，不用来回切换编辑器了（最开始装 VSCode 是为了写 LaTex）；

  • 代码编辑器的风格用起来很亲切很熟悉，好像在写代码（对非计算机从业者可能是另一种体验）；

  • 它很 Windows，完全可以用 Windows 的思路去熟悉它；


如何在 VSCode 上安装扩展插件

插件安装流程如下：

在VSCode上搭建Markdown写作环境

其实，应用商店是有按钮可达的，就是窗口最左侧一栏的那个右上角小方块飞出去一点的图标。但是我懒得截图，所以直接写了快捷键。😛


语法扩展

任何一款被称为优秀的编辑器，都会对 Markdown 进行扩展，好让这个轻量级的标记语言变得更加好用。VSCode 对 Markdown的扩展是通过插件实现的。用没有插件的 VSCode 写 Markdown， 跟用纸解方程一样，哪有用计算机解题方便快捷啊，是不是？所以，为了提高写作效率，有3个是必装的。

  • Markdown All in One

  • mardownlint

  • Markdown Preview Enhanced


Markdown All in One

这个插件就像它的名字一样，集成了用 Markdown 写作需要的大部分功能，是 VSCode 的 Markdown 必备扩展。它集成的功能包括：

  • 键盘快捷键

  • 目录

  • 列表编辑

  • 将 Markdown 打印到 HTML

  • GitHub 风格的 Markdown

  • 数学

  • 自动完成

  • 其他

插件作者特别贴心的在 GitHub 上的项目介绍页写了详细的使用介绍，还配有动图，玩不明白的话，去看一眼动图基本就都懂了。

https://github.com/yzhang-gh/vscode-markdown


mardownlint

mardownlint 是一个语法检查器。Markdown 说到底还是一种标记语言，有需要遵守的语法，如果语法不对，就不能渲染出想要的样式。对新手而言，装了这个插件，基本上就相当于装了一个隐形老师。平时不出现，一写错就出现，监督你写正确的 Markdown。

这个插件还挺严格的，我作为一个经常写Markdown的老手，有时还是会被提醒语法 warning。不影响渲染，但就是不规范。被上两个编辑器给惯的……

回顾：一篇文章写下来，最大的不规范就是代码块从不定义语言类别（不影响渲染排版），报了好几个warning，最后要回过头去一个个补。但是警告信息也写的挺明确的，甚至点过去还有样例示范，所以问题很快就解决了。


Markdown Preview Enhanced

Markdown Preview Enhanced 被用户们亲切地简称为 MPE。开发者们在帮助文档里这样吹自己：Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件。这款插件意在让你拥有飘逸的 Markdown 写作体验。

于是我看了一眼这个插件的各种特性，好像确实可以这么吹。以下列表中，加粗的是我在用的功能，划下划线是我惊喜但还没使用过的功能。开发者们贴心地提供了好几种语言的文档支持，包括简体中文，有疑问的时候，不要犹豫，从插件简介页面戳进去寻找答案吧。

  • 自动编辑器及预览滑动同步

  • 导入外部文件

  • Code Chunk

  • Pandoc

  • Prince

  • 电子书

  • 幻灯片

  • 可扩展性

  • LaTeX 数学

  • 导出 PDF, PNG, 以及 JPEG 凭借 Puppeteer

  • 导出漂亮的 HTML（移动端支持）

  • 编译到 GitHub Flavored Markdown

  • 自定义预览 CSS

  • TOC 生成

  • 流程图 / 时序图 以及各种其他种类的图形

  • 嵌入 LaTeX, 渲染 TikZ, Chemfig 等图形

  • Task List (Github Flavored)

  • 图片助手

  • 脚注

  • Front Matter

  • 以及更多。。。

MPE 支持导入的外部文件非常多，包括图片、CSV、JS、Markdown等，极大地丰富了 Markdown的可扩展性。其中，CSV 的导入，让我觉得，自己可以放弃在 Markdown 里手敲一个表格了，我完全可以把表格做好了，再导进来，虽然一样麻烦，但是表格的数据变得可以快捷编辑了。

MPE 的 TOC 生成需要好几步，有一款插件优化了一下，如果不习惯敲命令添加、更新、删除目录的话，建议安装插件 Auto Markdown TOC By AX1。

MPE 有个缺点：大而全的功能集成，导致它的运行效率相对于其他插件来说，慢了一个数量级（1768 ms vs 100+ ms）。因此，如果不能接受 MPE 的运行效率，可以使用其他插件组合来替代 MPE。本文后面会一一提到 MPE 的替代插件，并在文末进行总结。


Markdown Preview Mermaid Support

Markdown Preview Mermaid Support 支持 mermaid 预览。如果你不能接受 MPE 的速度的话，就可以使用这款 Markdown Preview Mermaid Support 来取代 MPE 的 mermaid 渲染功能。

Mermaid 是一种轻量级的绘图语言，它通过码字画图。比如上面安装插件的流程图，就是我用 Mermaid 画的，它的代码长这样：


    ``` mermaid
    graph TD;
        A(按下 Ctrl + Shift + X) -->|切换到应用商店边栏| B[左上角搜索栏中搜索扩展的名字];
        B -->|弹出下拉列表| C[选择一个扩展];
        C -->|右侧打开一个扩展介绍页面| D[在介绍页中点击安装按钮];
        D --> F(安装完毕);
    ```


编辑扩展


表格编辑

众所周知，Markdown 的表格编辑不是所见即所得模式。虽然 MPE 带了自动对齐表格的功能，但那远远不够。我在网上被安利了插件 MdTableEditor，据说可以大幅提升表格编辑效率。

我试了，确实可以很方便的添加、删除行列。但不知为何，新建一个表格的功能却不好使。暂时没找到原因，而我刚刚发现 MPE 可以导入表格文件 CSV，所以我敲完这句话之前，就把 MdTableEditor 给停用了。

同样的，如果你不想使用 MPE，那么就使用 MdTableEditor 来编辑表格。


章节编号与目录

Auto Markdown TOC By AX1，实现章节自动编号，及生成目录。这个插件在聊 MPE 的时候提过，它实现的功能 MPE 也可以实现，但这个插件更便捷一些。

同样的，如果你不想使用 MPE，那么就使用 Auto Markdown TOC By AX1 来处理目录以及章节编号问题，甚至还更简单一些。


文档绘图

虽然有 mermaid，但有时候我们可能需要绘制一些复杂到单纯靠码字码不出来的图形。这时，可以使用 VSCode 商店里大名鼎鼎的 Draw.io 的内嵌扩展 Draw.io Integration，安装完毕后三连：➡️ 新建 文件名.drawio 文件 ➡️ 打开文件拖拽绘图 ➡️ 导出为需要的格式。

但如果你不画很多很复杂的流程图的话，这个插件也可以不装，或者先禁用，要用的时候再启用就好了，我个人一个月用不上一回。


字数统计

Word Count CJK，可对各种字符进行统计，安装扩展后，在 settings.json 中添加以下代码：


{
  "wordcount_cjk.activateLanguages": ["markdown", "plaintext", "latex"],
  "wordcount_cjk.statusBarTextTemplate": "中文：${cjk} 字 + 英文：${en_words} 词",
  "wordcount_cjk.statusBarTooltipTemplate": "中文字数：${cjk} \\n 非 ASCII 字符数：\\t${total - ascii} \\n 英文单词数：${en_words} \\n 非空白字符数：${total - whitespace} \\n 总字符数：${total}"
}

注意：

settings.json文件的打开方式为：按下F1，输入settings，选择 Open settings / 打开设置选项。如果文件为空，上述代码连｛｝拷贝进去，完事大吉。如果文件不为空，在文件｛｝里的最后一行代码末尾敲半角英文,，然后回车换行（换几行都行，为了区别开，可以多换一行），只要添加的代码，不要拷贝｛｝。


WYSIWYG 模式

Typora 往往被当作 markdown 的首选，这很大程度上得益于所见即所得（WYSIWYG）模式，如今 VSCode 社区也提供了相应的，目前还不够成熟，但已经迈出了重要的一步。其中，最有人气的是如下两个，均基于 vditor:

  • Office Viewer

  • Markdown Editor

我试用了 Office Viewer，效果目前还不甚理想，VSCode再套一个有工具栏的文本编辑窗口，感觉怪怪的，所以我最后又卸了。如果你已经习惯了所见即所得的写作模式，那么可以试一下这个插件。


图床

图床是从本地发布文章到博客时最好具备的一个东西，一张一张在网站里插图重复且无聊。

vs-picgo 用于将图像上传到远程图像托管服务并将 url 插入到当前编辑文件中。它比其他工具更有效。它可以给我们更好的上传图片体验。 vs-picgo 支持 8 种图片托管服务：weibo、七牛、tcyun、upyun、github、aliyun、imgur 和 SM.MS，由 PicGo-Core 支持。PicGo-Core 的插件功能正在开发中。

我图床用的是阿里云，配置如下。


{
    "picgo.picBed.aliyun.accessKeyId": "阿里云管理端获取",
    "picgo.picBed.aliyun.accessKeySecret": "阿里云管理端获取",
    "picgo.picBed.current": "aliyun",
    "picgo.picBed.aliyun.area": "oss-cn-beijing",
    "picgo.picBed.aliyun.bucket": "bucket名字",
    "picgo.picBed.aliyun.customUrl": "域名",
    "picgo.picBed.aliyun.path": "img/",
}

具体怎么获取以上各项的值，参考《【Typora】typora+picgo+阿里云oss搭建图床》。

VSCode 上的 PicGo 没有 Typora 那么顺手，开发团队既然说还在开发中，那么可以再等一下。


输出扩展


文件导出

如果你装了 MPE，那么可以使用 MPE 来导出 Markdown 到其他文件格式， 包括：

  • HTML

  • Puppeteer

  • PDF

  • eBook

  • Prince (PDF)

  • Pandoc

    • PDF

    • Word

    • RTF

    • Beamer

    • Custom

    • Bibliographies and Citations

  • Markdown (GFM)

同样的，如果你嫌弃 MPE，那么可以安装插件 vscode-pandoc，实现上述列表中 Pandoc 所支持的各种输出文件格式。

无论用哪种插件使用 Pandoc 转换文件，都需要安装 Pandoc，并进行设置。对于.pdf的转换，为了支持中文，需要在 settings.json中添加以下代码：


{
    "pandoc.pdfOptString": "-s --pdf-engine=xelatex -V CJKmainfont=\"Microsoft YaHei\" -V geometry:margin=2.5cm",
}

注意事项同字数统计插件配置。但是如果只是导出PDF，而不导出其他格式，比如 Word，那么不用装 Pandoc，直接用 MPE 导就可以了，它支持通过 Chrome 打印PDF，前提是你装了 Chrome 浏览器。


平台发布


知乎发布

WPL/s 继承于 Zhihu On VSCode，可用于 Markdown 在知乎上一键发布，尤其适合存在大量图片和代码块的帖子，当然也在 VSCode 里看帖摸鱼。

比之曾经的初代扩展，其最有特色的功能之一是，支持元数据，可以在本地修改已经发布的帖子，只需在题头添加：


    ---
    title: [文章题目]
    zhihu-url: [文章链接]
    zhihu-title-image: [题图]
    zhihu-tags: [知乎标签]
    ---

而且，作者非常人性化的把之前的扩展链接，从文章开头放在了文章结尾。之前讨厌的开篇一句话“本文使用。。。发布”不见了。

详情可参看其作者的介绍。


WordPress 发布

WordPress Post 是我目前找到的唯一一个 WordPress 博客发布插件。安装插件后，配置WordPress的网址、用户名以及应用密码，每次在题头加上跟知乎发布一样的元数据，就可以发布修改帖子了。

配置文件如下，添加方法以及注意事项见 字数统计 。


{
    "wordpress-post.debug": true,
    "wordpress-post.siteUrl": "https://hongbowei.com",
    "wordpress-post.apiUrl": "https://hongbowei.com/wp-json/wp/v2",
    "wordpress-post.authPassword": "pezC 0F6r b1gA ySQ0 yCwH ARQX",
    "wordpress-post.authUser": "khdvampiress",
    "wordpress-post.useLinkableImage": true,
}

元数据内容如下：


    ---
    title: 在VSCode上搭建Markdown写作环境
    status: publish
    date: "2022-03-26T09:00:00"
    categories: [studysrc, learn_about]
    tags: [vscode, markdown, extensions]
    ---

    This is sample document of extention "WordPress Post".
    Test of Line Break.

注意事项 ：

  1. 对于中文写作，如果想要链接为英文，那么文件名需要用全英文的文件名，这是一个新的插件，作者目前应该还没有考虑过这个问题。

  2. 类别 categories 这个地方要填该类别的别名，一般是英文的，在博客的分类管理页面上可以查。tag同。

  3. 该插件目前仅支持新文章发布，不支持更新。


MPE 替代插件

所有我试过的插件都介绍完了，至此，MPE 的所有替代插件全部浮出水面：

  • Markdown Preview Mermaid Support（语法扩展 mermaid 支持）

  • MdTableEditor（表格编辑）

  • Auto Markdown TOC By AX1 （章节编号与目录）

  • vscode-pandoc （文件导出）

我最后还是选择牺牲一点儿性能，使用 MPE，因为特别稀罕它那个外部文件导入功能。

本部分内容摘自网友 端水大法师 的《搭建 Markdown 强大写作环境（VSCode）》

- END -


作者简介：落小鸢，喜爱阅读，影视以及胡思乱想。


封面图片来源：网络


点击「」，按分类查看所有原创文章

欢迎星标、在看、赞赏三连。

推荐阅读

《鬼武者：梦想的黎明》PC 高清贴图演示下载 PCSX2 1.7｜4K60fps 《鬼武者：梦想的黎明》PC 高清贴图演示下载 PCSX2 1.7｜4K60fps
2022，VSCode 前端插件推荐（摸鱼必备） 2022，VSCode 前端插件推荐（摸鱼必备）

相关文章