Markdown code indentation with HAML

Question

I've been digging around for an answer for this since yesterday, and I'm stumped as to why is occurring...

We're delivering Markdown content through standard HAML templates (we're using the excellent static site generator Middleman to build, FYI), and Redcarpet to parse Markdown.

Everything is working as expected in terms of Markdown output, with the exception of code blocks:

layout.haml
(only a part of the file, showing a simple =yield. This %section is intended 6 spaces in the HAML file):

%section.content.main_content
  = yield

index.html.md
(only a part of the file, showing the code block code)

### Header Level 3
Here's some code:

    $total-columns  : 12;
    $column-width   : 4em;
    $gutter-width   : 1em;
    $grid-padding   : $gutter-width;

The output though, is not what we are expecting, and something is messing around with indentation. I'm unsure if HAML is the culprit, or what exactly is causing it:

Here is a screenshot of the browser output: http://bit.ly/JvjTYo

Here is a screenshot of the DOM from Chrome Developer Rools: http://bit.ly/JWprGO

We've tried a few different Any help is VERY welcome. If you want to see the full source on GitHub, let me know.

Answer 1

Have a look at the Haml docs on whitespace. In this case you should be able to fix it by using the ~ operator instead of =:

%section.content.main_content
~ yield

Answer 2

I have a feeling this is HAML. It seems like it's trying to interpret and indent for you.

Do you have :ugly output on?

Also, do you have the below set for your pre tags?:

pre { white-space:pre }

EDIT: Found this Markdown Line Breaks in Code Blocks which might help