Code blocks are too narrow.

[MatthiasWinkelmann]

Code blocks are wrapped in <figure class="highlight"> or <pre> elements. Because width's (or max-width's) are set on these as well as on <code>, these multiply. For the default post layout, the resulting code block gets less than 25% of page widths. The problem can be seen at http://clayh53.github.io/tufte-jekyll/articles/15/tufte-style-jekyll-blog#code

I have tried to correct this and tested it with code blocks in lists, full-width-layout and post layout. I don't have many test pages and am not sure about possible unintended side effects.

[clayh53]

Ok this is weird. When I build the blog and serve it locally, the ruby {% highlight Ruby %} tag works by wrapping the <pre> <code> in a <div> tag. But when I use the Rakefile to upload it to the gh-pages branch, the highlighted code is wrapped in a <figure> tag! I'm not sure what is going on, but I can't test any possible CSS fixes because it doesn't happen locally! WTF???

[clayh53]

this is the generated html in _site on the gh-pages branch at github:

<p>In theory, one should be able to append the language name right after the first three backticks and get some sexy code syntax highlighting, but for some reason, the only way I can make this work with the Kramdown and Rouge highlighting turned on is to enclose a block of code in the some Liquid tags. For instance, here is the Ruby code for one of the plugins included with this theme:</p>

<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">module</span>

And this is the code on my local build:

<p>In theory, one should be able to append the language name right after the first three backticks and get some sexy code syntax highlighting, but for some reason, the only way I can make this work with the Kramdown and Rouge highlighting turned on is to enclose a block of code in the some Liquid tags. For instance, here is the Ruby code for one of the plugins included with this theme:</p>

<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">module</span> 

???

[ghost]

I'm not exactly sure what problem you're running into. However there's no need to debug it because if you reconfigure _config.yml you'll be able to use codeblocks with appended language names. See: https://github.com/gettalong/kramdown/issues/271 and http://sacha.me/articles/jekyll-rouge/

You need to add a single line to the kramdown configuration in _config.yml

kramdown:
  input: GFM
  syntax_highlighter: rouge

Rebuild, and then test a codeblock and it should have full coloring. It's working great locally for me. So no need for the funky rouge liquid tags.

``` ruby
  module Jekyll
    blah, blah...
  Liquid::Template.register_tag('fullwidth', Jekyll::RenderFullWidthTag)

Of course this means there is some documentation to be re-written :wink: 

BONUS: the highlighted code blocks using this method are wider and may solve the problem this PR is meant to address.

[clayh53]

Much easier fix. I've updated the repo with the new _config.yml file. Thanks for the tip!

[ghost]

:tropical_drink: :smiley: