Jekyll 偏移代码片段高亮的初始行

Posted 2023-03-30

【中文标题】Jekyll 偏移代码片段高亮的初始行

【英文标题】：Jekyll offsetting initial line of code snippet highlighting

【发布时间】：2014-09-18 22:49:37

【问题描述】：

所以我正在使用 Jekyll 和 Pygments 在我的博客上设置代码高亮，并且每个 sn-p 的第一行都被一些无穷小的偏移量。我正在尝试使用lineno 类的右边框来创建一个排水沟，这使得偏移非常明显，如下所示

这是我检查相关区域时的 DOM，

这里是来源：

这里是相关的 CSS 源代码：

.highlight code 
    background:#3A434A;
    font-family: 'Source Code Pro', Monaco, monospace;
    
.highlight pre 
    background:#3A434A;
pre .lineno  
    color: #eff1f5; 
    display:inline-block; 
    padding: 4px 10px 4px 0px; 
    border-right:1px solid #8fa1b3

这让我很生气，哈哈；我确定我遗漏了一些明显的东西。我在所有浏览器中都获得了一致的行为。另外，如果您想自己查看，请Here's 一个链接。

【参考方案1】：

来自 Jekyll CSS

pre > code 
  border: 0;
  padding-right: 0;
  padding-left: 0; 

code padding-left 需要为 0。

【讨论】：

太棒了！谢谢一捆！知道为什么填充以这种方式影响第一行而不影响其他行吗？

对不起，我不是 css 大师，我只是从 F12 调试中得到这个。但如果它不是一个错误，它就是一个特性 ;-)

出于某种原因，我猜<code> 标签没有宽度或高度，尽管开发工具显示它是包裹孩子的。浏览器实际上是在 <pre> 和 <code> 的第一个子元素“之间”应用此填充