前端解析markdown 并高亮渲染代码块

更新了一版博客,将内容编辑器由富文本替换成了 markdown 编辑器 在前端页面渲染我用到了几个解析 markdown 的组件库分享给大家

首先是将字符串里的 markdown 语法解析成 HTML,使用的是marked

import marked from "marked";
const markdownText = '# 标题';
const htmlContent = marked.parse(markdownText);

代码块语法高亮需要用到marked-highlighthighlight.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);

效果看这篇博客就可以看到