如何让 VSCode 拥有和掘金一样好看的 Markdown 样式（内含 Markdown 渲染原理）-五八三

建议阅读时间：8 分钟

前言

本篇文章适用于平时会使用 Markdown 的同学

正文

我们在逛掘金的时候经常看到这种各样好看的文章主题样式，例如：

主题 fancy	主题 channing-cyan	主题 smartblue

这些好看的样式都是掘金平台提供给作者发布文章时可选择的，当然掘金也允许用户贡献主题

然而，我们平时在 VSCode 中预览 Markdown 的样式就会没那么好看

那么我们怎样才能把掘金中好看的样式搬到 VSCode 中呢？
首先我们要先了解一下 Markdown 的解析机制

Markdown 解析原理

我们来看一下百科是怎么说的

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。

划重点，Markdown 是将纯文本文档转化成HTML文档的方案，这让人们可以简单的通过编辑纯文本就可以渲染出漂亮排版整齐的超文本文档

我们可以在很多地方看到 Markdown 的身影

Github、Gitee 等代码仓库平台项目的首页就会渲染项目根目录中 README.md 文件
掘金等博客平台发文章也都是使用 Markdown 语法
typora 等笔记管理软件也支持 Markdown
VSCode、Idea 等代码编辑工具也支持 Markdown 文档渲染

Markdown 语法是具有标准的，不过各个厂商实现 Markdown 转化算法时会有些许差异，不过最终输出的 HTML 文档基本都是相同的

VSCode 中解析渲染 Markdown

VSCode 作为一个可以高度定制化的软件，我们对其 Markdown 渲染样式进行修改理论上是可行的
我们先来看看 VSCode 解析之后的 Markdown 是什么样子的
打开 VSCode 的开发者工具（因为 VSCode 是基于 Electron 开发的软件，可以简单理解为在 HTML 页面外层包了一层桌面应用程序的外壳，所以也具有浏览器一样的调试能力）

在 VSCode 的 dom 元素中我们找到 Markdown 预览页面这部分

下面这部分涉及到一些前端知识，但不懂也可以，可以简单了解一下，后面照着操作就好

可以看出，这个 Markdown 预览页面中渲染了由左侧纯文本文档转化出的 html 文档，并且其 css 样式使用的是一个叫做 markdown.css 的文件，那么我们只要找到这个文件然后把它的样式改成我们喜欢的样子就可以了
我们在 VSCode 安装目录下搜索 markdown.css

然后打开这个文件

那么我们只要照着掘金的样式进行调整 css 代码就可以了
等等！！不对劲！这么多的样式，要抄多久才能抄完啊！！

诶，那我们猜测，掘金的样式应该也是用的某一份 css 样式，我们只要把那套样式复制过来就好了

获取掘金的 Markdown 样式文件

那我们就想办法获取一下掘金的 css 样式吧
首先我们随便打开一篇我们喜欢的样式的掘金文章：好看文章例子
然后打开开发者工具，随便选中一个页面中元素

我们可以发现，dom 元素的样式来自这个文件，我们打开这个文件，在文件中搜一下 markdown

那么显然这里的样式代码就是我们要找的样式了，我们把它复制到刚刚的 VSCode 的 markdown.css 文件中

然后全局替换一下，把.markdown-body替换成body
然后现在我们试一下！

好啦！大功告成啦！