Pygments來做代碼塊格式增加了怪異的空間，以降價的代碼塊

enter image description here

要明確指出什麼我說什麼，我的意思是每之前的空間。，+,]，|和=。以及可能在其他地方出現的其他標點符號。

我使用pygments.rb和Redcarpet gem來格式化我添加到降價的代碼塊。每一個代碼塊被包圍在這個SASS（在實際文件的互聯右）風格的一個.codebox DIV：

.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

來源

2013-03-26 Sasha

你可以使用網絡檢查器檢查問題領域，看看有些CSS是罪魁禍首，添加填充/邊距？或者他們是真實的空間？ –

是啊！有一個類「.o」應用於罪魁禍首元素，增加了7px的餘裕。在CSS中添加一個.o規則的確有竅門。謝謝你的建議，那已經死了！ – Sasha

希望你不要介意我把這個作爲答案，然後你可以接受它。 –

正如我在評論說，你可能要檢查與網絡檢查結果代碼塊的CSS。 Pygments的工作原理是將不同的css規則應用於生成的代碼塊的不同標記。有可能你有一些css與這個輸出產生衝突，併產生你正在見證的效果，或者你的代碼塊的默認樣式表正在導致這種情況。這應該是一個簡單的修復。

來源

2013-03-26 03:45:08

Pygments來做代碼塊格式增加了怪異的空間，以降價的代碼塊

回答

相關問題