Vue加载显示富文本内容

Vue加载显示富文本内容

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数据处理

   t = marked(tDetail, {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、效果预览