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

还有我关于 Redcarpet 的 config.rb 信息

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 上最大的白痴，没有之一。正如 Chris 所说， protected 代码与溢出完全无关。我花了两天时间用谷歌搜索错误的东西。答案是 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;
}

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