1、安装marked

npm install highlight.js --save
npm install marked --save

2、引入

    import marked from 'marked'
    import hljs from "highlight.js";
    import 'highlight.js/styles/monokai-sublime.css';
      mounted() {
            marked.setOptions({
                renderer: new marked.Renderer(),
                highlight: function (code) {
                    return hljs.highlightAuto(code).value;
                },
                pedantic: false,
                gfm: true,
                tables: true,
                breaks: true,
                sanitize: false,
                smartLists: true,
                smartypants: false,
                xhtml: true
            }),
        }
        

<template>
    <div style="width: 100%;min-height:1200px;">
        <div style="width: 100%;min-height:1000px;background: #ffffff">
            <div class="content"
                   v-html="content">
              </div>
        </div>
    </div>
</template>

3、md数据处理

   this.content = marked(response.data.contentDetail, {breaks: true}).replace(/<pre>/g, "<pre class='hljs'>");

注意：replace(/<pre>/g, "<pre class='hljs'>");是让代码块高亮的关键，样式内容通过引入的import 'highlight.js/styles/monokai-sublime.css';去修改，可以highlight.js/styles/下找你喜欢的样式

4、效果预览