发布于 1 个月前 ,更新于 1 个月前 node

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 不仅仅只可以用于微信公众号,还可以用于邮件,在其他一些网站的富文本编辑器中直接粘贴也是可以的。

© 2016 - 2021 BY 禾惠 粤ICP备20027042号