通过 Redcarpet 在 Middleman 中的围栏代码无法正常工作

Question

因此，我一直在利用中间人开发自己的博客/网站，但通过 redcarpet 的围栏代码遇到了一些障碍。无论我做什么，我似乎都会反复遇到同样的问题。好吧图片值一千字你可以在下面看到我的问题

因此，您无需将代码围起来，而是将代码溢出到围起来的区域之外。我不确定我需要做什么/添加才能使其正常运行。有人建议我的 CSS 是罪魁祸首，这就是我的看法。

pre, code {
    text-align: left;
  padding: .6em;
  border-radius: .3em;
  font-size: 2vmin;
  font-family: "Lucida Console", Monaco, monospace;
}

pre[class*="highlight "] {
    background: #21252B;
}

还有我与红地毯有关的 config.rb 信息

set :markdown_engine, :redcarpet
set :markdown,  :fenced_code_blocks => true,
                :smartypants => true,
                :tables => true,
                :highlight => true,
                :with_toc_data => true

任何解决此问题的方向都将不胜感激！

编辑：

降价

```ruby
class Game
    def initialize
        @board = ["0","1","2","3","4","5","6","7","8"]
    end
    def start_game
        puts "|_#{@board[0]}_|_#{@board[1]}_|_#{@board[2]}_|\n|_#{@board[3]}_|_#{@board[4]}_|_#{@board[5]}_|\n|_#{@board[6]}_|_#{@board[7]}_|_#{@board[8]}_|\n"
    end
end
```

和渲染的 html

<pre class="highlight ruby"><code><span class="k">class</span> <span class="nc">Game</span>
    <span class="k">def</span> <span class="nf">initialize</span>
        <span class="vi">@board</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"0"</span><span class="p">,</span><span class="s2">"1"</span><span class="p">,</span><span class="s2">"2"</span><span class="p">,</span><span class="s2">"3"</span><span class="p">,</span><span class="s2">"4"</span><span class="p">,</span><span class="s2">"5"</span><span class="p">,</span><span class="s2">"6"</span><span class="p">,</span><span class="s2">"7"</span><span class="p">,</span><span class="s2">"8"</span><span class="p">]</span>
    <span class="k">end</span>
    <span class="k">def</span> <span class="nf">start_game</span>
        <span class="nb">puts</span> <span class="s2">"|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="si">}</span><span class="s2">_|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span><span class="si">}</span><span class="s2">_|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span><span class="si">}</span><span class="s2">_|</span><span class="se">\n</span><span class="s2">|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span><span class="si">}</span><span class="s2">_|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span><span class="si">}</span><span class="s2">_|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">5</span><span class="p">]</span><span class="si">}</span><span class="s2">_|</span><span class="se">\n</span><span class="s2">|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">6</span><span class="p">]</span><span class="si">}</span><span class="s2">_|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">7</span><span class="p">]</span><span class="si">}</span><span class="s2">_|_</span><span class="si">#{</span><span class="vi">@board</span><span class="p">[</span><span class="mi">8</span><span class="p">]</span><span class="si">}</span><span class="s2">_|</span><span class="se">\n</span><span class="s2">"</span>
    <span class="k">end</span>
<span class="k">end</span>
</code></pre>

Answer 1

我现在是 Stack Overflow 上最大的白痴，没有之一。正如 Chris 所说，防护代码与溢出完全无关。我花了两天时间在谷歌上搜索错误的东西。答案是 css3 属性overflow-x，我欣然承认我只是在学习，因为它正在搜索它以正确回答 Chris 的询问。

解决我令人尴尬的简单问题的有效解决方案

pre, code {
  text-align: left;
  padding: .6em;
  border-radius: 4px;
  font-size: 2vmin;
  font-family: "Lucida Console", Monaco, monospace;

  // answer is below
  overflow-x: scroll;
}

对不起，我去把脸埋在枕头里大喊大笑/大喊/可能会因为我的愚蠢而哭泣。