# 使用 Marked.js + Highlight.js 实现前端 Markdown 渲染与代码高亮
基本使用：
## 安装依赖
```bash
npm install marked highlight.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) => {
      return hljs.highlightAuto(code).value;
    }
  })
);

// 渲染 Markdown 内容
const reportContent = ref(
  marked.parse(`# Hello World
  
  \`\`\`javascript
  function hello() {
    console.log('Hello, world!');
  }
  \`\`\``)
);

在 Vue 模板中渲染

<template>
  <div v-html="reportContent"></div>
</template>

效果说明

代码块将显示类似 CSDN 的语法高亮效果，主题为 github.css。

完整示例

<template>
  <div v-html="reportContent"></div>
</template>

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

export default {
  setup() {
    const marked = new Marked(
      markedHighlight({
        async: false,
        langPrefix: 'language-',
        emptyLangClass: 'no-lang',
        highlight: (code) => {
          return hljs.highlightAuto(code).value;
        }
      })
    );

    const reportContent = ref(marked.parse(`# Hello World
    
    \`\`\`javascript
    function hello() {
      console.log('Hello, world!');
    }
    \`\`\``));

    return { reportContent };
  }
};
</script>

注意事项

1. 需要更多语言高亮时，引入对应语言包：

   npm install highlight.js@latest
   

2. 推荐主题列表：highlight.js Demo