Pygments 代码块格式化程序为 Markdown 代码块添加了奇怪的空格

Posted 2023-03-30

【中文标题】Pygments 代码块格式化程序为 Markdown 代码块添加了奇怪的空格

【英文标题】：Pygments codeblock formatter adds weird spaces to markdown codeblocks

【发布时间】：2013-03-26 00:47:32

【问题描述】：

如下图：

为了明确指出我在说什么，我指的是每个 .、+、]、 之前的空格| 和 =。以及可能出现在其他地方的其他标点符号。

我正在使用 pygments.rb 和 Redcarpet gem 来格式化我添加到 markdown 的代码块。每个代码块都包含在一个 .codebox div 中，该 div 使用此 SASS 样式（在实际文件中右击）：

.highlight
  pre
    white-space: pre
    overflow: scroll
    word-wrap: normal

.codebox
    margin: auto
    margin-top: 15px
    margin-bottom: -5px
    padding-right: 8px
    padding-left: 8px
    padding-top: 5px
    padding-bottom: 5px
    padding-top: -20px
    background-color: $codebox
    p
        font-family: 'Rockwell Bold'
        &::selection
            background: $pigPink
            color: #fff
        &::moz-selection
            background: $pigPink
            color: #fff
    pre
        font-family: 'Rockwell Bold'
        font-size: 90%

当然还有降价 ` 反引号。如果相关，这是我的 pygments 配置设置：

application_helper.rb

  class htmlwithPygments < Redcarpet::Render::HTML
    def block_code(code, language)
      Pygments.highlight(code, lexer: language)
    end
  end

  def markdown(text)
    renderer = HTMLwithPygments.new(hard_wrap: true)
    options = 
      nowrap: true,
      autolink: true,
      no_intra_emphasis: true,
      fenced_code_blocks: true,
      lax_html_blocks: true,
      strikethrough: true,
      superscript: true
    
    Redcarpet::Markdown.new(renderer, options).render(text).html_safe
  end

【问题讨论】：

你能用 web 检查器检查问题区域，看看是否某些 css 是罪魁祸首，添加填充/边距吗？还是它们是真实的空间？

是的！有一个类“.o”应用于罪魁祸首元素，它增加了 7px 的左边距。在 css 中添加 .o 规则就可以了。感谢您的建议，那已经死了！

希望你不介意我把它作为答案然后你可以接受它。

【参考方案1】：

正如我在评论中所说，您可能希望使用 web 检查器检查生成的代码块的 css。 Pygments 通过将不同的 css 规则应用于生成的代码块的不同标记来工作。您拥有的某些 css 可能与此输出发生冲突并产生您所看到的效果，或者您的代码块的默认样式表导致了这种情况。这应该是一个简单的修复。