Vue加载显示富文本内容
1、安装markednpm install highlight.js --savenpm install marked --save2、引入import marked from 'marked'import hljs from "highlight.js";import 'highlight.js/styles/monokai-sublime.css';mounted() {marked.setO
·
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、效果预览
更多推荐
已为社区贡献1条内容
所有评论(0)