技术派如何渲染 markdown？

大家好，我是二哥呀。

今天由我来给大家讲一下技术派是如何渲染 markdown 的，主要涉及到两部分，一部分是编辑文章的时候，另外一部分是显示文章详情的时候。用到了editormd、bytemd、flexmark、KaTeX 等插件，支持 emoji、科学公式、表格等。

技术派专栏地址：https://paicoding.com/column/6/16

技术派语雀地址可以通过「新人必看」置顶帖进行查看：https://t.zsxq.com/15rEo9Pdu

我先截图说明一下在什么位置，这是编辑文章的时候：

技术派的编辑器支持：

• LaTeX 科学公式（数学家和计算机科学家的写作工具）
• 任务列表（ToDoList）
• 识别和解析HTML标签（上图中的 iframe 视频播放器）
• 代码高亮（可复制）
• 表格（涉及到 markdown 转 HTML 的后端插件）
• 常规的 markdown 语法

这是展示文章详情的时候：

几乎当下主流的文章编辑器都支持 markdown，并且很早就取代了富文本的霸主地位，如果大家想开发一款内容平台的话，markdown 转 HTML 基本上是绕不开的一个环节，那技术派是如何做到的呢？

文章编辑页

插件

技术派的前端用了两款插件，用户端是 editormd，admin 端用的掘金的插件 bytemd。

• editormd：https://pandao.github.io/editor.md/index.html
• bytemd：https://github.com/bytedance/bytemd

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。

代码应用路径：/paicoding/paicoding-ui/src/main/resources/templates/views/article-edit，见下图。

ByteMD 是掘金社区开源的 Markdown 编辑器组件，可以优雅地集成在 React、Vue 和 Angular 框架中。

代码应用路径：/paicoding-admin/src/views/article/edit

Editor.md 的应用

第一步，下载 Editor.md 的源文件

https://github.com/pandao/editor.md/releases

最新 release 版本是 v1.5.0，技术派在此基础上进行了很多自定义。

比如说图片上传，比如说 LaTeX 科学公式，我都直接在源码上进行更改了，因为原有的 Editor.md 支持的并不友好。大家需要的话，可以直接从技术派的源码中下载。

第二步，把 CSS 和 JS 文件引入到项目当中

其中的 th:href 和 th:src 是为了做 CDN，技术派会把静态文件存入 OSS，然后通过 CDN 进行访问，这样可以加快静态文件的访问速度。

第三步，启用 Editor.md

首先，需要在页面中加入一个 DIV，里面放一个隐藏的 te...