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.

You posted two of the same links to your screenshots from the looks of it. — al3xnull, May 10 '12 at 00:56

score 6 · Accepted Answer · answered May 10 '12 at 01:15

6

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

answered May 10 '12 at 01:15

matt

78,533
8
163
197

1

Thank you @matt. This worked 100% as expected, without having to resort to :ugly output. I never knew about that operator, and I hope this helps someone else combining HAML with other whitespace-sensitive markup. – Danny Palmer May 10 '12 at 02:10

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

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

edited May 23 '17 at 12:08

Community

1
1

answered May 10 '12 at 01:02

al3xnull

866
1
13
29

:ugly output did the trick (which is too bad, since I love a nicely indented source). Thank you! – Danny Palmer May 10 '12 at 01:12
Not a problem! Danny, I'm not familiar with Middleman, but you could try setting environment specific variables if it runs a development server to set the :ugly setting. I'm also not sure if Slim would treat the space better than HAML either. Just food for thought. – al3xnull May 10 '12 at 01:17
Silm **definitely** would, but I'm a HAML guy. :) Give Middleman a shot if you need to develop a static site, but still want a Ruby on Rails workflow. It's excellent. – Danny Palmer May 10 '12 at 02:04

Markdown code indentation with HAML

2 Answers2