Prismjs 是前端界面显示代码语法高亮的npm包
它实现了代码在前端页面显示时就像在编辑器中时一样的样式
要在vue框架中使用这样的装逼神器首先要做的自然是安装他了
npm i --save Prismjs
npm i --save babel-plugin-prismjs
复制代码当然如果你安装使用了淘宝的cnpm自然可以这样安装
cnpm i --save Prismjs
cnpm i --save babel-plugin-prismjs
复制代码然后就是在vue中引入了
打开main.js引入
import Prism from 'prismjs'
Prism.highlightAll()
复制代码你以为这样就好了？这也太简单了吧!
其实还有 babel-plugin-prismjs
我们需要在项目根目录 .babelrc 中加入配置信息
[
"prismjs",
{
"languages": ["javascript", "css", "markup"], //这是语言类型
"plugins": ["line-numbers"],//使用了行号还可以添加其他插件，具体去官网看看吧
"theme": "twilight",//主题！！
"css": true
}
]
复制代码其实并不难嘛
在我自己的项目中也使用了这一插件去实现博客代码块的显示。可以去我的博客看看哦!
如果还是有不清楚的可以去github看我的博客源码看看具体的实现哦
对了还有一点，如果你的代码是异步获取的话呢那么这个显示就可能会出现一点小问题。就是代码的语法高亮没有显示出来那该怎么办呢？
那就是在异步获取到数据之后执行
Prism.highlightAll()
复制代码当然在执行这段代码之前需要 import
import Prism from 'prismjs'复制代码很详细了吧！
欢迎到我的博客、我的github逛哦！
我的github：https://github.com/panyu97py
我的博客源码：https://github.com/panyu97py/blog-client