Marked.js 前端渲染MD文档，以及实现语法高亮

Marked.js 前端渲染MD文档，以及实现语法高亮

官方文档中文网
marked-highlight

基本使用：

安装
npm install marked

语法：

md内容

效果图

可以观察到代码块并没有像CSDN一样实现语法高亮，以下是配合highlig.js实现代码块高亮

首先正确引入包,选择高亮主题

import { ref } from 'vue'
import { Marked } from 'marked'
import { markedHighlight } from "marked-highlight";
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

接下来配置一下Marked

const marked = new Marked(
  markedHighlight({
    async: false, // 如果是异步的，可以设置为 true
    langPrefix: 'language-', // 可选：用于给代码块添加前缀
    emptyLangClass: 'no-lang', // 没有指定语言的代码块会添加这个类名
    highlight: (code) => {
      // 使用 highlight.js 的自动检测功能
      return hljs.highlightAuto(code).value
    }
  })
);

const reportContent = ref(marked.parse(`content`)

code标签被加上相应的类，成功实现高亮