登录
首页 >  文章 >  前端

使用highlight.js库如何为HTML源代码添加行号？

时间：2024-11-08 14:51:58 251浏览 收藏

哈喽！今天心血来潮给大家带来了《使用highlight.js库如何为HTML源代码添加行号？ 》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

使用highlight.js库如何为HTML源代码添加行号？

使用highlightjs添加HTML源代码行号

在生成带行号的HTML源代码时，使用highlightjs时可能会遇到困难。以下是在使用highlight.js库添加行号的正确步骤：

  1. 为了实现此功能，需要补充样式以创建行号容器和其他必要的样式。
  2. 在<head>标签中，使用以下样式：
<pre> {
    position: relative;
    margin-bottom: 24px;
    border-radius: 3px;
    border: 1px solid #C3CCD0;
    background: #FFF;
    overflow: hidden;
}

code {
    display: block;
    padding: 12px 24px;
    overflow-y: auto;
    font-weight: 300;
    font-family: Menlo, monospace;
    font-size: 0.8em;
}

code.has-numbering {
    margin-left: 21px;
}

.pre-numbering {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    padding: 12px 2px 12px 0;
    border-right: 1px solid #C3CCD0;
    border-radius: 3px 0 0 3px;
    background-color: #EEE;
    text-align: right;
    font-family: Menlo, monospace;
    font-size: 0.8em;
    color: #AAA;
}
</pre>
  1. 为了使用highlight.js库的高亮功能，在<head>标签中添加以下脚本：
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  1. 在<head>标签中添加以下脚本以添加行号：
<script>
    hljs.highlightAll();
    $(function () {
        $('pre code').each(function () {
            var lines = $(this).text().split('\n').length - 1;
            var $numbering = $(' <ul></ul>').addClass('pre-numbering');
            $(this)
                .addClass('has-numbering')
                .parent()
                .append($numbering);
            for (i = 1; i <= lines; i++) {
                $numbering.append($(' <li></li>').text(i));
            }
        });
    });
</script>

通过上述步骤，现在可以在使用highlight.js库时添加行号到HTML源代码中。

到这里，我们也就讲完了《使用highlight.js库如何为HTML源代码添加行号？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>