前端解析markdown 并高亮渲染代码块
更新了一版博客,将内容编辑器由富文本替换成了 markdown 编辑器 在前端页面渲染我用到了几个解析 markdown 的组件库分享给大家
首先是将字符串里的 markdown 语法解析成 HTML,使用的是marked
import marked from "marked";
const markdownText = '# 标题';
const htmlContent = marked.parse(markdownText);
代码块语法高亮需要用到marked-highlight和highlight.js
import { markedHighlight } from "marked-highlight";
import hljs from "highlight.js";
import "highlight.js/styles/a11y-dark.css";
const marked = new Marked(
markedHighlight({
emptyLangClass: "hljs",
langPrefix: "hljs language-",
highlight: (code) => {
return hljs.highlightAuto(code).value;
},
}),
);
const html = marked.parse(props.post.content);
效果看这篇博客就可以看到