前言

最近准备搭建一个简单的文档平台，用于组内的文档管理。作为一个程序员，大多数情况下咱们写文档使用的都是markdown语法，比如wiki、hexo、github，然后在浏览器上展示。

目前大部分的编辑器都有自己的markdown插件并支持实时预览，如下图，

图1

此图是vscode编辑器，左侧是markdown文件，右侧是实时预览的界面，咱们这次的目标就是将markdown在浏览器上展示成这个样式。

marked

为了将markdown在浏览器上展示就必须先将markdown转化为html，有了明确的需求就可以去网上搜寻一下工具，我们很容易就能找到一个使用非常频繁的工具——marked。

图2

如图2，它支持在页面中编译markdown代码，但是我们更希望先在后台完成编译的工作再将编译的产物放到页面中使用，这样页面的性能会提示一丢丢，因此我们使用它的node方式。

图3

如图3，node编译markdown的步骤也十分简单，仅需以下几步，

• 配置marked参数
• 读取md内容
• 编译

图4

如图4，左侧是markdown编译后的html，右侧是在浏览器中展示的情况，此时完全没有任何样式，所以我们还需要为它配置主题。我们选用最流行的样式——github-markdown-css，把它引入到文件中，再看看效果。

图5

现在页面已经有样式了，和github的readme展示的样式一样，但是你会发现两个问题，

• 有些markdown语法不支持，比如表格
• 代码片段并没有高亮，如图5

注意：编译产物最外层需要包一层容器，容器的class名字为markdown-body，否则样式不生效。

markdown-it

为了解决上面第一个问题，我们将marked模块换成markdown-it模块，用法如下，

图6

此时markdown的大部分语法都已经支持了，但仍有个别语法不支持，不过不要紧，我们可以将markdown-it的html参数设置为true，这样用户可以直接用html语法写markdown。

prism.js

代码块没有高亮是不可接受的，这会让同志们的浏览欲望大大降低。对比了一下highlight.js，我选择了prism.js。不为别的，就是因为它满足了我的要求。有人说prismjs比highlight.js对样式控制的更精细，不过I don't care it。

图7

如图7，我一眼就看中了这个主题，有趣。那还等什么，直接把js和css都down下来，引入页面。现在咱们再去看看效果，如下图，

图8

和我的编辑器主题一样。

到这里我们已经完成了我们的需求。

总结

将markdown转化为html其实就两步，一是选择编译工具，需要尽可能多的支持markdown语法，二是选主题，需要看着养眼。

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！