uni-app 使用highlight.js(有行号)

效果图

使用vue.use() 会报错，没找到原因

main.js

import hljs from 'highlight.js'
import 'highlight.js/styles/a11y-dark.css' // 这里可以切换不同的主题

Vue.directive('highlight',function (el) {
    let blocks = el.querySelectorAll('pre code');
    setTimeout(() =>{
        blocks.forEach((block)=>{
			hljs.highlightBlock(block)
        })
    }, 200)
})

index.vue

<scroll-view 
	scroll-y="true" 
		scroll-x="true" 
		style="height: 600rpx;" 
	>
	<view v-highlight>
		<pre>
			<code v-html="content"></code>
		</pre>
	</view>
</scroll-view>

onLoad() {
// 这里是自己加上的代码行号 插件本来是没有的
this.$nextTick(() => {
		var e = document.querySelectorAll("code")
		var e_len = e.length
		var i
		for (i = 0; i < e_len; i++) {
		e[i].innerHTML = "<ul><li>" + e[i].innerHTML.replace(/\n/g, "\n</li><li>") + "\n</li></ul>"
		}
	})
	
},

代码行号的css

hljs ul {			
	list-style: decimal;			
	margin: 0 0 0 40px!important;			
	padding: 0			
}			
.hljs li {			
	list-style: decimal-leading-zero;			
	border-left: 1px solid #111!important;			
	padding: 2px 5px!important;			
	margin: 0!important;			
	line-height: 14px;			
	width: 100%;			
	box-sizing: border-box
}
.hljs li:nth-of-type(even) {
	background-color: rgba(255,255,255,.015);
	color: inherit
}
/*最后 代码太长的话不会自动换行*/
.hljs{
	white-space: pre-wrap;
	word-wrap: break-word;
}