vue nuxt.js 代码高亮 prismjs 或 highlight.js 插件的用法
功能点分析： 前端vue2.0 + nuxt.js 实现代码高亮 使用的插件是 prismjs 和 babel-plugin-prismjs编译器插件
1.安装 prismjs 插件 和 babel-plugin-prismjs
npm install prismjs // 这里也可以使用 yarn add prismjs npm install babel-plugin-prismjs -D
课外小知识 · prismjs 要 配合着 babel-plugin-prismjs 编译器更好
有的小伙伴就好奇了
为啥要编译器更好呢 这里我就借用 prismjs 官网的一句话
*为了方便地仅使用您需要的语言和插件配置您的 Prism 实例，请使用 babel 插件
babel-plugin-prismjs。这将允许您加载最少数量的语言和插件以满足您的需求。有关配置详细信息，请参阅该插件的文档。
书归正传
2.需要配置 babel-plugin-prismjs 编译器这个插件
我们可以通过 nuxt 的 nuxt.config.js 文件进行配置
module.exports = { build: { babel: { plugins: [ [ 'prismjs', { // 可以选择多种语言 languages:['javascript','php','c','cpp','python','go'], //配置显示行号插件 plugins: [ 'line-numbers', ], theme: 'coy', //主体名称 css: true } ] ] } }, }
3.在plugins文件下添加一个prismjs.js
在prismjs.js 中引入
·亿点小知识 ·provide/inject provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。
import Prism from 'prismjs'; //可以引入其他的css样式 import 'prismjs/themes/prism.min.css'; export default (ctx, inject) => { inject('prism', Prism) }
4.在需要美化的代码块中添加
// reCode 其实就是要高亮的内容 请看下面 js代码 <pre v-html="resCode"></pre> //在页面中使用 methods：{ // 在方法中使用 this.$prism.highlight resCode(){ return this.$prism.highlight(`var txt = 内容`, this.$prism.languages.bash, 'bash') // language.xxx或lang.xxx选择编程语言 } }
_此功能适用与 vue + nuxt 想要纯 vue 可以点击下面穿越 _
还有另一个 vue-highlightjs来实现 代码高亮 穿越
想要进一步详细的配置 高亮内容 请穿越 prismjs官网
