Markdown 转成含行内样式的 HTML

最近开了「前端禾惠」微信公众号，准备把博客文章发布到微信公众号中。在公众号中添加图文时发现编辑器是不支持 markdown 语法的。于是找到了墨滴，在墨滴网站输入 markdown 内容，就可以直接复制内容并粘贴到微信公众号（相当于在这里将 markdown 转换成含样式的 HTML）。

墨滴做的还是非常好的，还支持换主题。但每次需要到墨滴进行操作一遍再粘贴到公众号比较繁琐，于是就想着能否直接在博客中直接发布到微信公众号。

要实现该功能需要满足两个条件：

1. 微信公众号要有相应 api 接口（这个条件已满足）
2. 将 markdown 语法内容转换成含行内样式的 HTML

所以只需要解决第二个问题就可以实现。

查看了 markdown-nice 的源码，它主要使用的是 juice 这个库将 HTML 和 CSS 转换成含行内样式的 HTML。

所以最终所用到的依赖包和实现逻辑如下：

1. 使用 marked 将 markdown 语法转换成 HTML
2. 使用 highlight.js 高亮代码块
3. 使用 mark-down-style 作为样式主题（该依赖包是我基于 github-markdown-css 这个仓库做了简化处理）

最终代码如下：

import * as Fs from 'fs';
import juice from 'juice';
import hljs from 'highlight.js';
import marked from 'marked';

// 使用 highlight.js 处理代码块高亮
marked.setOptions({
  langPrefix: 'hljs ',
  highlight(code) {
    return hljs.highlightAuto(code).value;
  },
});

// 读取 mark-down-style 中的 css 代码
const markdownCss = Fs.readFileSync(require.resolve('mark-down-style'), 'utf8');

// 读取 highlight.js 代码块样式的 css 
//（可以在 highlight.js/styles 目录中选你喜欢的代码样式）
const highlightCss = Fs.readFileSync(require.resolve('highlight.js/styles/night-owl.css'));

function getHtml(markdown: string) {
  return juice.inlineContent(
    `<div class="md-style">${marked(markdown)}</div>`,
    `${highlightCss}\n${highlightCss}`,
    {
      inlinePseudoElements: true,
      preserveImportant: true,
    },
  );
}

此时将 markdown 内容传给 getHtml 方法就可以得到含行内样式的 HTML 了。

当然，生成的 HTML 不仅仅只可以用于微信公众号，还可以用于邮件，在其他一些网站的富文本编辑器中直接粘贴也是可以的。