高亮代码

安装依赖

npm install highlight.js --save 
或 
yarn add highlight.js

main.js中引入

import hljs from 'highlight.js'
// import 'highlight.js/styles/kimbie-light.css'

import 'highlight.js/styles/idea.css'  //这里有多个样式，自己可以根据需要切换
Vue.use(hljs.vuePlugin);

在组件中使用

<div id="app">
  <!-- 可以使用自动检测 -->
  <highlightjs autodetect :code="function test(){}" />
  <!-- 也可以指定语言 -->
  <highlightjs language='javascript' code="var x = 5;" />
</div>

Vue.directive('highlight', {
    update(el){
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
            if(block.getAttribute("highlighted")=="true"){
                return
            }
            block.setAttribute("highlighted","true")
            let code = block.innerHTML// block.innerHTML="<div><span style='margin-right: 10px;padding: 3px;border: #107ded solid 1px;color:#107ded;border-radius: 5px'>"+ "test"+"</span><button>复制</button>"+block.innerHTML+"</div>"
            hljs.highlightElement(block)
            lineNumbersBlock(block)
            block.innerHTML="<div><div style='padding: 5px 0px 10px 20px'><span style='margin-right: 10px;padding: 5px;border: rgba(16, 125, 237,0.5) solid 1px;color:#107ded;border-radius: 5px'>"+ block.className.match(/(?<=language-).*(?= hljs)/).toString()+"</span><button class='el-button el-button--default el-button--mini' style='border-radius: 5px'>复制</button></div>"+block.innerHTML+"</div>"
            let copyButton = block.querySelector('button')
            if(copyButton!=null){
                copyButton.onclick = function (){
                    copy(code)
                    Message.success({message:"复制成功！", offset:100})
                }
            }
        })
    }
})

修改行号样式

.hljs-ln-numbers {
	text-align: center;
	color: #ccc;
	border-right: 1px solid #CCC;
	vertical-align: top;
	padding-right: 5px !important;
}
 
.hljs-ln-code {
	padding-left: 15px !important;
}

按需加载

使用highlight.js的时候需要按需加载，否则打包后的dist会非常的大，按需加载方法如下图所示

//按需加载代码高亮组件
hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'))
hljs.registerLanguage('java', require('highlight.js/lib/languages/java'))
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'))
hljs.registerLanguage('python', require('highlight.js/lib/languages/python'))
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'))
hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'))
hljs.registerLanguage('css', require('highlight.js/lib/languages/css'))
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'))
hljs.registerLanguage('c', require('highlight.js/lib/languages/c'))
hljs.registerLanguage('c++', require('highlight.js/lib/languages/cpp'))
hljs.registerLanguage('json', require('highlight.js/lib/languages/json'))
//富文本插件代码块的配置属性
Vue.prototype.languages=[
    {language: 'bash', label: 'Bash'},
    {language: 'java',label: 'Java'},
    {language: 'javascript',label: 'JavaScript'},
    {language: 'python', label: 'Python'},
    {language: 'sql', label: 'SQL'},
    {language: 'html',label: 'HTML'},
    {language: 'css',label: 'CSS'},
    {language: 'xml',label: 'XML'},
    { language: 'c', label: 'C' },
    {language: 'c++', label: 'C++'},
    {language: 'json',label: 'JSON'}
]