通过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;
}

我的red.petat.rb信息与redcarpet

有关

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

任何解决这个问题的方向都会非常感激！

编辑：

Markdown

```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栏上最大的白痴。正如克里斯所说，隔离代码与溢出完全无关。我花了两天时间在谷歌上搜索错误的东西。答案是css3属性overflow-x，我很乐意因为搜索它而正确地回答克里斯的询问。

解决我这个令人尴尬的简单问题的解决方案

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;
}

对不起，当我把脸扔进枕头，大笑/大叫/可能会因为我的愚蠢而撕裂。