登录
首页 >  文章 >  前端

如何使用 HighlightJS 为 HTML 代码添加行号？

时间：2024-11-12 18:43:04 206浏览 收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何使用 HighlightJS 为 HTML 代码添加行号？ 》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

如何使用 HighlightJS 为 HTML 代码添加行号？

如何使用 HighlightJS 添加 HTML 源代码行号

在使用 HighlightJS 突出显示 HTML 源代码时，你提到无法为代码添加行号。这是因为 HighlightJS 默认不会添加行号，你需要手动添加。

官方文档说明

官方文档中关于行号的描述：https://highlightjs.readthedocs.io/en/latest/line-numbers.html

修改后的代码

为了解决你的问题，修改后的代码如下：

<!DOCTYPE html>

<head>
    <style>
        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;
        }
    </style>
    <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>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <pre>
        <code class="language-html">
            &lt;!DOCTYPE html&gt;
            &lt;html lang=&quot;en&quot;&gt;
            &lt;head&gt;
                &lt;meta charset=&quot;UTF-8&quot;&gt;
                &lt;title&gt;行号&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;p&gt;测试页面&lt;/p&gt;
            &lt;/body&gt;
            &lt;/html&gt;
        </code>
    </pre>

    <script>
        hljs.highlightAll();
        $(function() {
            $('pre code').each(function() {
                var lines = $(this).text().split('\n').length - 1;
                var $numbering = $('&lt;ul/&gt;').addClass('pre-numbering');
                $(this)
                    .addClass('has-numbering')
                    .parent()
                    .append($numbering);
                for (i = 1; i <= lines; i++) {
                    $numbering.append($('&lt;li/&gt;').text(i));
                }
            });
        });
    </script>
</body>

</html>

说明

  • 确保引入了 HighlightJS 库和相关 CSS 文件。
  • 在 <code> 元素上添加 language-html 类，以正确突出显示 HTML 代码。
  • 添加了 JavaScript 代码，它将根据代码行数动态生成行号。
  • pre-numbering CSS 类样式用于设置行号的样式。

今天关于《如何使用 HighlightJS 为 HTML 代码添加行号？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

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