Highlight.js实现显示行号（改造highlightjs-line-number）

最新推荐文章于 2025-03-17 15:12:38 发布

ZhouJianGuos

最新推荐文章于 2025-03-17 15:12:38 发布

阅读量5.5k

点赞数 3

分类专栏：个人笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/JianguoChow/article/details/124000488

版权

个人笔记专栏收录该内容

5 篇文章

订阅专栏

一、问题描述

看到csdn官方博客在代码块内实现了添加行号的功能，于是百度了一下实现方案，简单的概括一下就是通过正则表达式匹配代码块中换行符替换为<li>以实现添加行号的功能，但是该方法存在多行注释失效的问题，如下图所示，想了好久都没能找到解决的办法

二、解决方案

我通过打开csdn页面，调用浏览器控制台进行搜索发现了csdn使用的添加行号插件的名称，那就是highlightjs-line-numer，但是该插件的语法仍然是老版本的语法，并且代码也存在一些问题，于是直接下载到本地，并进行一点点的修改，代码已经上传到gitee了，git地址为
git@gitee.com:zhou-jian-guo/highlight_line_number.git

可以直接将js代码拷贝到自己的项目内，代码如下，在我的项目中，除了使用这个实现代码添加行号以外，还增加了代码一键复制的按钮：

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;

        /* your custom style here */
    }

/* for block of code */
 .hljs-ln-code {
        padding-left: 5px !important;
	}

三、其他注意事项

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

//按需加载代码高亮组件
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'}
]