适用场景:编程 · 技术教程
「科技极客」是一套微信公众号排版风格,特点是深色底、语法高亮代码块、警告框。在编辑器中用 Markdown 书写正文即可自动套用这套样式,所有样式都以内联方式输出,复制后可直接粘贴到公众号后台。
本文介绍如何用 50 行代码实现一个 Markdown 转公众号 HTML 的渲染器。
需要 Node.js 18 以上版本,先安装依赖:
npm install marked juice --save
! 注意
公众号后台会移除 class 与 style 标签,样式必须全部写成内联 style。
import { marked } from 'marked';
// 将每个节点的样式写入 style 属性,保证粘贴后样式不丢失
const render = (md, theme) => {
const html = marked.parse(md);
return inlineStyles(html, theme, { removeClass: true, maxDepth: 10 });
};
code 标记✦ 提示
复制前先在手机预览里检查一遍排版。
示例文章仅用于展示,使用后可在编辑器中替换为自己的内容。