markdown 代码高亮
需要依赖
npm install marked --save
npm install highlight.js --save
这里使用的主题是monokai-sublime.css
可以自行更换主题。
结果
html
<template>
<div>
<div class="hljs" ref="hlDiv" v-html="code"></div>
</div>
</template>
<script>
import marked from 'marked'
import hljs from 'highlight.js';
import 'highlight.js/styles/agate.css';
export default {
name: "height",
data() {
return {
code: '```javascript\nfunction(){\n\tconsole.log(123)\n}\n```'
}
},
mounted() {
marked.setOptions({
renderer: new marked.Renderer(),
highlight: function (code, language) {
const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
if (language && hljs.getLanguage(language)) {
return '<div class="hljs">' + hljs.highlight(validLanguage, code).value + '</div>';
}
return hljs.highlight(validLanguage, code).value;
},
// highlight: function (code, language) {
// const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
// return hljs.highlight(validLanguage, code).value;
// },
pedantic: false,
gfm: true,
tables: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false
});
this.code = marked(this.code)
},
}
</script>