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官网

vue 代码高亮 prismjs 或 highlight.js插件的用法

vue nuxt.js 代码高亮 prismjs 或 highlight.js 插件的用法

猜你喜欢