html代码块加行号

HTML 是一个常用的标记语言，用于创建网页，其中代码块是常见的代码形式。为了让代码块更加易读，我们可以加上行号。

pre style="font-family:Consolas;
    font-size:14px;
    background:#f8f8f8;
    ">
    code class="line-numbers language-html">
    html>
         head>
             title>
    Hello World/title>
         /head>
         body>
             h1>
    Hello World!/h1>
             p>
    This is a paragraph./p>
         /body>
     /html>
     /code>
    

如上所示，我们可以使用 pre 标签展示代码块，并且加入 style 属性来设置字体和背景颜色。另外，我们可以使用 line-numbers 类来为代码块加上行号。

在使用 line-numbers 类之前，需要在头部引入一些必要的样式。

link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark.min.css">
    script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js">
    /script>
    link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.css">
    script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js">
    /script>
    

代码块加上行号后，不仅可以增强代码的可读性，同时也方便其他人查看和评论你的代码。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！