Vue加载显示富文本内容

Posted 2022-12-10 楠之枫雪

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、效果预览