markdown 代码高亮

需要依赖

• npm install marked --save
• npm install highlight.js --save

这里使用的主题是monokai-sublime.css可以自行更换主题。

结果

<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>