formatting code with jekyll 3 and bootstrap

The release of Jekyll version 3 changed the default syntax highlighter from Pygments to Rouge. In a previous blog entry I described how I formatted code snippets for this blog which uses Jekyll version 2, Pygments and Bootstrap. That code does not work with the new version of Jekyll. This blog post will describe what I did to format code snippets when using Jekyll version 3 and Bootstrap version 3.

Jekyll now wraps code snippets in a figure HTML tag. If linenumbers are used, a table is generated with the following (simplified) structure:

<figure class="highlight">
 <pre>
  <code class="language-xxx" data-lang="xxx">
   <table style="border-spacing: 0">
    <tbody>
     <tr>
      <td class="gutter gl" style="text-align: right"><pre class="lineno">1 ...snipped numbers...</pre></td>
      <td class="code"><pre>...snipped code...</pre></td>
     </tr>
    </tbody>
   </table>
  </code>
 </pre>
</figure>

I did the following to format code blocks:

1. Created a stylesheet for syntax hightlighting. I used the github syntax stylesheet
2. Added the following to the stylesheet

.highlight .lineno { border: none; border-radius: 0; border-right: solid 1px; color: #aaa; }
.highlight .code pre { border: none; white-space: pre; overflow-x: auto; word-wrap: normal; }
.highlight code { display: block; white-space: pre; overflow-x: auto; word-wrap: normal; }

The good news is, this code is much simpler than what I used for formatting the code snippets with Jekyll version 2 and Bootstrap! Unfortunately, it is not yet available with Github Pages. Hopefully, it will be soon!

You can see the full CSS file on Github: syntax.css

If you have any questions or suggestions on how I can improve this code, please let me know!