vue中实现代码高亮

在vue中使用prismjs

  1 首先在项目中安装prismjs插件:

cnpm install prismjs -S

  2 安装完成后，需要继续安装一个prismjs的编译器插件

cnpm install babel-plugin-prismjs -D

  3 在.babelrc文件中配置使用该插件：  

{
  "plugins": [
    ["prismjs", {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"],
      "theme": "twilight",
      "css": true
    }]
  ]
}

5 prismjs 官网地址：https://prismjs.com/

在html中使用

首先进入 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript 页面定制下载页面样式

然后在网页中引入

<link href="/static/prismjs/prism.css" rel="stylesheet" type="text/css">


<script src="/static/prismjs/prism.js"></script>

<script>
    //jquery版
    $('pre').each( function() {
        $(this).html('<code class="language-php">'+ $(this).html() +'</code>')
    })

</script>