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

本文链接：https://blog.csdn.net/qq2754289818/article/details/126396101

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

功能点分析：前端vue2.0 + nuxt.js 实现代码高亮使用的插件是 highlight

1.安装 highlight.js

npm install highlight.js // 这里也可以使用 yarn add highlight.js

2.在plugins文件下添加一个highlight.js

在highlight.js中引入

·亿点小知识 ·provide/inject
provide可以在父组件中指定我们想要提供给子组件的数据或方法，而在任何子组件中，我们都可以使用 inject 来接收 provide
提供的数据或方法。


import Vue from 'vue'
import hljs from 'highlight.js'
//样式文件,我选的是atom-one-dark-reasonable样式 可以通过highlight.js/styles 选择其他css
import 'highlight.js/styles/atom-one-dark-reasonable.css'
// import 'highlight.js/styles/atom-one-dark.css'

// 这里 挂载highlight
Vue.directive('highlight',function (el) {
    let element = el.querySelectorAll('pre code');
    element .forEach((block)=>{
      hljs.highlightBlock(block)
    })
})

3.使用代码高亮v-highlight

<div class="vHighlight" v-else v-html="resCode" v-highlight></div>
methods：{
	resCode(){ 
	return resCode = " let a = 2"
}

如果是 vue 的 main.js
把第二步替换成在main.js中引入highlight.js 步骤同上

还有另一个 prismjs 来实现代码高亮穿越

想要进一步详细的配置高亮内容请穿越 vue-highlightjs官网