安装markde.js 与代码高亮插件 highlight.js
npm install marked
npm install highlight.js
用法
<template>
<div v-html="markdownString" class="md"></div>
</template>
<script>
//引入marked解析模块 与 代码高亮插件 以及对应的样式文件
import marked from 'marked'
import hljs from 'highlight.js'
import '../../assets/css/yeh-md-theme.css'
import '../../assets/css/ocean.min.css'
//基本配置与代码高亮配置
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
let markdownString = '```js\n console.log("hello"); \n```';
markdownString = marked(markdownString)
</script>
页面渲染效果
console.log("hello");
