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周期中执行。这样每个页面打开都会渲染一遍。