Embed code in pre/code tags in HAML

Question

I am trying to get some code syntax highlighting for some docs i'm writing, I'm using HAML and Highlight.js which will work for a single line of Ruby code like this (although the highlighting is not great):

   %pre
     %code
       \=link_to('link name on page', 'link destiation', :class => 'class-name', :icon => 'clock-o', :icon_last => true)

But if I try and write some CSS in the pre and code tags, like this:

  %pre
    %code
      ul {
        li {
          Background: red;
        }
      }

I get the "Illegal nesting: nesting within plain text is illegal." error, due to the brackets on the end of the CSS stuff.

Does anyone know of a plugin / method of being able to write code example (SASS, Ruby, HAML, Coffeescript mainly) on the webpage using HAML? Short of just writing all the css on one line. I'm aiming for this kind of result - CSS-Tricks

Answer 1

You can use the :preserve filter:

%pre
  %code
    :preserve
      ul {
        li {
          Background: red;
        }
      }

This prevents the indented code being parsed as Haml, and also converts newlines into entities so that the code appears as you expect with no extra whitespace.

If you use the :ugly option exclusively you could use the :plain filter instead. This doesn’t convert newlines into entities but prevents parsing as Haml.