vue页面中展示代码实现高亮

我们常见在一些博客网站看到源码展示，供读者研读、复制。但是如果代码像在代码编辑器里面一样对标签、变量...进行上色，那就大大提高可阅读性，读者浏览起来也相对舒适。

Prismjs就是一款在前端界面显示代码语法高亮的npm包；它实现了代码在前端页面显示时就像在编辑器中时一样的样式。

它支持 201种语言 的代码高亮

再来看看效果是不是符合口味（以Html为例）

DEFAULT

DARK

FUNKY

OKAIDIA

TWILIGHT

COY

SOLARIZED LIGHT

TOMORROW NIGHT

使用

一、引入依赖

npm i --save prismjs 
npm i --save babel-plugin-prismjs 

二、main.js文件中使用

import Prism from "prismjs";

三、.babelrc文件plugins中添加配置

["prismjs", {
          "languages": ["javascript", "css", "markup", "html"],//语言
          "plugins": ["line-numbers"],//行号插件（可以不用，还有其他插件网上查询）
          "theme": "tomorrow",  //主题coy|twillight|tomorrow|solarizedlight|okaidia|funky|dark
          "css": true
        }
]

四、在有代码要高亮渲染的页面执行代码高亮方法

mounted() {
          Prism.highlightAll();//代码高亮渲染函数
},

注：

Prism.highlightAll()可以直接在main.js中执行。但是单页面应用中页面发现高亮渲染只执行了一次，效果就是第一次打开的页面中代码有高亮，换其他页就没有。
于是就把高亮函数放在了mounted周期中执行。这样每个页面打开都会渲染一遍。