vue中使用marked+highlight.js实现代码高亮效果

marked是对markdown进行解析的插件，它可以把markdown语法解析成html语法，从而实现页面效果，而highlight.js是对解析出的代码实现高亮效果，在实现代码高亮的时候我也用了其他方式，效果并不理想，踩了一些坑，下面给大家介绍如何避免这些坑！

安装 marked

npm install marked --save

安装 highlight.js

npm install highlight.js --save

实现代码

<template>
<div class="detail">
  <div class="markdown-body">
    <div class="article_message hljs renderNav" v-html="code"></div>
  </div>
</div>
</template>

<script>
  import marked from "marked"; // 引入marked
  import hljs from "highlight.js"; // 引入 highlight.js
  import "highlight.js/styles/monokai-sublime.css"; // 引入高亮样式 这里我用的是sublime样式

  export default {
  name: "Detail",
  data() {
    return{
      code:'```javascript\nfunction(){\n\tconsole.log(123)\n}\n```', // 要解析的markdown语法的内容
    }
  },
  mounted(){
    var rendererMD = new marked.Renderer();
    marked.setOptions({
      renderer: rendererMD,
      highlight: function(code) {
        return hljs.highlightAuto(code).value;
      },
      pedantic: false,
      gfm: true,
      tables: true,
      breaks: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: false
    });
    this.code = marked(this.code);// 将markdown内容解析
  },
</script>

实现效果

请前往物语 | 博客查看详情

避免踩坑

1.这里安装的marked与highlight.js都是最新版本，所以我在下载的时候也是最新的版本，这样会导致一个问题，注释会与主代码的样式一样，都是高亮状态，这样让人看得极不舒服，于是我查询了大量文献也没找到解决办法，最后我从版本入手，最终解决问题！！！

版本如下：

2.highlight.js高亮的样式也可一改变，你可以点击下面的链接选取你喜欢的样式

highlight.js样式链接