最近，将博客的文章编辑器从富文本改为了 markdown 编辑器，为了最终渲染的效果，需完成富文本的转化。

前端渲染

我们可以通过 marked 和 markdown-it 等库，把markdown 为 html 文本。

如使用 marked 转换 markdown 为 html：

const renderer = new marked.Renderer()

const value = '某段markdown文本'

var renderer = new marked.Renderer()
var htmlStr = marked(value, {
  breaks: true,
  headerIds: false,
  renderer: renderer,
})

富文本样式配置

通过以上方式，虽然解析了 markdown 为富文本，但没有配套样式。可以在一些文档项目中把 css 部分拿来使用。

博客之前用的是 quill 这个富文本编辑器，所以沿用了 quill 的样式。

<div class="post-content ql-snow">
    <div class="ql-editor">
        <!-- 渲染富文本 html 代码 -->
    </div>
</div>

代码高亮

使用 highlight 进行代码高亮。比如在 marked 的 highlight 属性传入函数，处理需要高亮的富文本代码即可。

marked.parse(post.content, {
    breaks: true,
    headerIds: false,
    highlight(code, lang) {
        return hljs.highlight(code, { language: lang }).value;
    },
    renderer: renderer,
  });
};