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

admin数码03/11/2024 21:02:0300

如何使用 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 class="brush:php;toolbar:false">
        <code class="language-html">
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>行号</title>
            </head>
            <body>
                <p>测试页面</p>
            </body>
            </html>
        </code>

登录后复制

以上就是如何使用 HighlightJS 为 HTML 代码添加行号？的详细内容，更多请关注其它相关文章！

Tags：行号代码