Middleman & Haml with Github-style fenced code blocks

Question

I'm starting using Middleman for static web pages & blogging purposes. I'm using it with a ZURB Fondation based template, Middleman-Foundation. It employs Haml, and I'm indeed inclined to use Haml, with Markdown files occasionally.

I'm using redcarpet for markdown, to also make use of Github-style fenced code blocks for source highlighting. But I could not figure out how to setup it for Markdown in Haml.

I've checked middleman-syntax which works for .html.md but not for .html.haml. I've tried to figure it out from Glorify but failed. I've checked this and this too.

What are the basics steps to achieve working fenced code blocks in Haml Markdown to produce highlighted source code.

It would be awesome to have a set of steps from start for this, from gem install middleman and cloning/employing Middleman-Foundation, but any short, actual answer is welcome.

EDIT

I was able to achieve pygmentized code blocks in Haml with the following (sad that it seems not possible to use markdown with fenced code blocks for this...):

  %li#simple3Tab This is simple tab 3's content. It's, you know...okay.
  %li#simple4Tab
    -code("ruby") do
      :plain
        def my_cool_method(message)
          puts message
        end
%h3 Buttons

But there's a lasting problem, this is what I'm getting:

As can be seen the first line is not correctly being indented, this is happening because the previous code snippet is not producing a heading linebreak:

  <li id='simple3Tab'>This is simple tab 3's content. It's, you know...okay.</li>
  <li id='simple4Tab'>
    <div class="highlight"><pre><span class="k">def</span> <span class="nf">my_cool_method</span><span class="p">(</span><span class="n">message</span><span class="p">)</span>
      <span class="nb">puts</span> <span class="n">message</span>
    <span class="k">end</span>
    </pre></div>
  </li>
</ul>
<h3>Buttons</h3>

I cannot figure out how to break the line before the first <span>, following the opening <pre>, so that the code gets correctly indented like the other lines.

Desired:

  <li id='simple3Tab'>This is simple tab 3's content. It's, you know...okay.</li>
  <li id='simple4Tab'>
    <div class="highlight"><pre>
    <span class="k">def</span> <span class="nf">my_cool_method</span><span class="p">(</span><span class="n">message</span><span class="p">)</span>
      <span class="nb">puts</span> <span class="n">message</span>
    <span class="k">end</span>
    </pre></div>
  </li>
</ul>
<h3>Buttons</h3>

Answer 1

I was able to figure it out through trial & error using the bits of information provided by @bhollis, Haml reference, and this SO question pointed by the Glorify author.

This is the magical combination:

  %li#simple3Tab This is simple tab 3's content. It's, you know...okay.
  %li#simple4Tab
    =preserve do
      -code("ruby") do
        :plain
          def my_cool_method(message)
            puts "Hello" + message
          end
%h3 Buttons

The result (for this one I've enabled an emacs stylesheet):

This not only solved the question about the "missing" heading newline, but also removed the extra indentation that the referred SO question talks about.

I'm still open for shorter and better approaches. Three lines of preamble to input code is a bit inconvenient.

Answer 2

Check out the docs for middleman-syntax: https://github.com/middleman/middleman-syntax

Code highlighting is automatically included in Markdown code blocks (via Redcarpet), but in Haml, it's better to use the "code" helper:

- code("ruby") do
  My ruby code here