问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用highlightjs增加html源代码的行号？

头像
luofeiyu
    1.7k29361714

    一段简单的代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行号</title>
</head>
<body>
    <p>测试页面</p>
</body>
</html>

    我想给它加行号，形成下面的形式


    阅读https://highlightjs.org后，写下了下面的代码

    <html>
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<pre><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&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>
</html>

    浏览器打开后的效果：

    image.png

    行号根本没有增加上去！请问，哪里不对？

    javascripthtml
    阅读 2.1k
    2 个回答
    得票最新
    头像
    已注销
      222311
      ✓ 已被采纳

      这是官网对行号的描述：
      https://highlightjs.readthedo...

      修改了下你的代码：

      <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="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&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 = $('<ul/>').addClass('pre-numbering');
                $(this)
                    .addClass('has-numbering')
                    .parent()
                    .append($numbering);
                for (i = 1; i <= lines; i++) {
                    $numbering.append($('<li/>').text(i));
                }
            });
        });
    </script>
</body>

</html>
      头像
      savalone
        211
        新手上路，请多包涵

        highlightjs-line-numbers.js

        Github：https://github.com/wcoder/hig...

        用法非常简单，在 highlight.pack.js 后面调用，如下：

        <script src="./highlight.pack.js"></script>
<script src="./highlightjs-line-numbers.min.js"></script>

        调用代码同样是一句话，如下：

        <script> 
  hljs.initHighlightingOnLoad();
  hljs.initLineNumbersOnLoad(); 
</script>

        或者用以下JQ代码调用

        $(document).ready(function() {
    $('code.hljs').each(function(i, block) {
        hljs.lineNumbersBlock(block);
    });
});

        插件会给代码区块包裹一层 tr 的行循环，行号是 td class="hljs-ln-line hljs-ln-numbers" ，代码为 td class="hljs-ln-line hljs-ln-code"，此时就可以自定义一些样式 css 了。

        /* for block of numbers */
pre code td.hljs-ln-numbers {
text-align: center;
color: #9c9c9c;
border-right: 0.5px solid #9c9c9c;
vertical-align: top;
padding-left: 0.5rem;
padding-right: 0.8rem;
}
/* for block of code */
pre code td.hljs-ln-code {
 padding-left: 1rem;
}

        参考：
        https://savalone.com/javascri...

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题