Fenced code in Middleman via Redcarpet not working correctly

Question

So I've been working on my own blog/site utilizing middleman and I've run into a bit of a snag with the fenced code via redcarpet. No matter what I do I seem to run into the same issue repeatedly. Well pictures are worth a thousand words you can see my issue below

fence-overflow

So instead of the code being fenced you just side scroll the code spills outside of the fenced area. I'm unsure what I need to do/add to make it behave correctly. Someone suggested my CSS is to blame, this is what I have in regards to that.

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

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

And my config.rb info pertaining to redcarpet

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

Any direction in solving this would be much appreciated!

EDIT:

The 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
```

and the rendered 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>

What is the Markdown text you are feeding in and what is the HTML which is being rendered? Without those, I doubt there is much help we can give. To get the HTML out, you can "view source" in your browser. — Waylan, Aug 25 '15 at 20:11
The "fenced area" has nothing whatsoever to do with line wrapping. "Fences" simply denote the beginning and end of your code blocks in the Markdown source. What outcome are you looking for? Having your code automatically wrap? Having the portion that overflows simply be hidden? — ChrisGPT was on strike, Aug 26 '15 at 13:51
updated the question with the proper information. @Chris I did not know that. I totally thought that's what fencing did! Thanks for the clarification. Definitely don't want word wrapping. I want the overflow to be hidden and the user has to scroll right to read the rest. Pretty much how it is in the question with HTML output I just edited above. — Dipet, Aug 26 '15 at 21:22

score 1 · Answer 1 · answered Aug 26 '15 at 21:35

I am an the biggest idiot on Stack Overflow bar none right now. As Chris stated, fenced code has absolutely nothing to do with overflow. I spent two days googling the wrong thing. The answer is the css3 property overflow-x that I readily admit to just learning due to searching for it to properly answer Chris' inquiry.

Working solution for my embarrassingly simple problem

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

Excuse me while I go throw my face into a pillow and yell laugh/yell/possible tear up at my stupidity.

In my opinion, answering your own question with a clear and elegant solution is one of the most beautiful things to see on Stack Overflow. I'm thrilled that you were able to find a solution on your own. Don't forget to [accept your own answer](http://stackoverflow.com/help/self-answer) when you're able to! — ChrisGPT was on strike, Aug 26 '15 at 21:55

Fenced code in Middleman via Redcarpet not working correctly

1 Answers1