html - 仅使用 css 在代码块上显示行号

我是 css 的新手，我想使用 css 来显示代码块的行号，但从来没有让它正常工作。

下面是完整的 html 和 css 源代码:

    .markdown-body hr:after, .markdown-body hr:before {
        content:"";
        display: table;
    }
    .markdown-body .anchor:focus, .markdown-body a:active, .markdown-body a:hover {
        outline: 0;
    }
    @font-face {
        font-family: octicons-anchor;
    }
    .readme {
        border: 1px solid #ddd;
        border-radius: 3px;
        display: table;
        margin: 20px auto;
        padding: 30px;
        width: 790px;
    }
    
    .markdown-body code, .markdown-body pre {
        font: 15px Consolas, "Liberation Mono", Menlo, Courier, monospace;
    }
    
    .markdown-body pre>code {
        background: 0 0;
        border: 0;
        font-size: 100%;
        margin: 0;
        padding: 0;
        white-space: pre;
        word-break: normal;
    }
    .markdown-body .highlight {
        color: #5e6e5e;
    }
    .markdown-body .highlight pre, .markdown-body pre {
        background-color: #fbebd4;
        border-radius: 3px;
        font-size: 85%;
        line-height: 1.45;
        overflow: auto;
        padding: 16px;
    }
    
    .markdown-body pre code {
        background-color: transparent;
        line-height: 0.5;
    }
    .markdown-body pre code:after, .markdown-body pre code:before {
        content: normal;
    }
    
    pre.line-numbers {
      position: relative;
       line-height: 0;
      width: em(440);
      margin: 4em auto;
      padding: 0.5em;
      border-radius: .25em;
      counter-reset: linenumber;
    }
    
    pre.line-numbers > code {
      position: relative;
      white-space: inherit;
    }
    
    .line-numbers .line-numbers-rows {
      position: absolute;
      top: 0;
      left: -3.8em;
      width: 4em;
      letter-spacing: -1px;
    
      pointer-events: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    .line-numbers-rows > span {
      pointer-events: none;
      display:block;
      counter-increment: linenumber;
    }
    
    .line-numbers-rows > span:before {
      content: counter(linenumber);
      color: #999;
      display: block;
      border-right: 1px solid #ddd;
      padding-right: 0.8em;
      text-align: right;
    }

 <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body><div class="readme"><article class="markdown-body"><h1>File <code>doc.my</code></h1>
    </br>
    <h3 id="requestmain">RequestMain</h3>
    <p>RequestMain class. It is the user/client code.</p>
    <div class="highlight highlight-source-swift"><pre class="line-numbers"><code class=" language-js"><span class="pl-k">class</span> <span class="pl-en">RequestMain</span> {
      <span class="pl-k">static</span> fn <span class="pl-c1">main</span>() {
        request <span class="pl-k">=</span> new <span class="pl-c1">Request</span>()
        request.<span class="pl-smi">FirstName</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Haifeng123456789<span class="pl-pds">"</span></span>
        request.<span class="pl-smi">LastName</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Huang     <span class="pl-pds">"</span></span>
        request.<span class="pl-smi">Dept</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Department of Labors<span class="pl-pds">"</span></span>
        RequestHandler.<span class="pl-c1">handle</span>(request)
      }
    }
    <span class="line-numbers-rows">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </span>
      </code>
    </pre></div>

问题是行号与代码不一致。我知道问题出在 css 代码中，但就是不知道如何解决。

有人帮我吗？

最佳答案

我个人会在 HTML 中以不同方式构建行号，但与您现在拥有的保持一致；

你可以做的一件事是将 .markdown-body pre code 上的 line-height 更改为 0；然后在 .line-numbers-rows > span:before 上将你的 line-height 设置为 19px;

更新代码:

.markdown-body hr:after,
.markdown-body hr:before {
    content: "";
    display: table;
}
.markdown-body .anchor:focus,
.markdown-body a:active,
.markdown-body a:hover {
    outline: 0;
}
@font-face {
    font-family: octicons-anchor;
}
.readme {
    border: 1px solid #ddd;
    border-radius: 3px;
    display: table;
    margin: 20px auto;
    padding: 30px;
    width: 790px;
}

.markdown-body code,
.markdown-body pre {
    font: 15px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.markdown-body pre > code {
    background: 0 0;
    border: 0;
    font-size: 100%;
    margin: 0;
    padding: 0;
    white-space: pre;
    word-break: normal;
}
.markdown-body .highlight {
    color: #5e6e5e;
}
.markdown-body .highlight pre,
.markdown-body pre {
    background-color: #fbebd4;
    border-radius: 3px;
    font-size: 85%;
    line-height: 1.45;
    overflow: auto;
    padding: 16px 30px;
}

.markdown-body pre code {
    background-color: transparent;
    line-height: 0;
}
.markdown-body pre code:after,
.markdown-body pre code:before {
    content: normal;
}

pre.line-numbers {
    position: relative;
    line-height: 0;
    width: em(440);
    margin: 4em auto;
    padding: 0.5em;
    border-radius: 0.25em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
    white-space: inherit;
}

.line-numbers .line-numbers-rows {
    position: absolute;
    top: 0;
    left: -4.5em;
    width: 4em;
    letter-spacing: -1px;

    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    border-right: 1px solid #ddd;
    padding-right: 0.8em;
    text-align: right;
    line-height: 19px;
}

<div class="readme">
    <article class="markdown-body">
        <h1>File <code>doc.my</code></h1>
        </br><h3 id="requestmain">
    RequestMain</h3>
        <p>RequestMain class. It is the user/client code.</p>
        <div class="highlight highlight-source-swift">
            <pre class="line-numbers"><code class=" language-js"><span class="pl-k">class</span> <span class="pl-en">RequestMain</span> {
  <span class="pl-k">static</span> fn <span class="pl-c1">main</span>() {
    request <span class="pl-k">=</span> new <span class="pl-c1">Request</span>()
    request.<span class="pl-smi">FirstName</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Haifeng123456789<span class="pl-pds">"</span></span>
    request.<span class="pl-smi">LastName</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Huang     <span class="pl-pds">"</span></span>
    request.<span class="pl-smi">Dept</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Department of Labors<span class="pl-pds">"</span></span>
    RequestHandler.<span class="pl-c1">handle</span>(request)
  }
}
<span class="line-numbers-rows">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </span>
  </code>
</pre>
        </div>

关于html - 仅使用 css 在代码块上显示行号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49122115/

html - 仅使用 css 在代码块上显示行号

上一篇：html - 制作一个 div 框中心 Bootstrap

下一篇：python - 元素不可点击(按钮被其他元素阻挡)