How to render a code block of Haml in Haml

Posted April 28, 2016 in Tutorials+Tips

I’m currently working on a style guide for a Rails app (fun!). The documentation is built as a baby Rails app of it’s own, thus in Haml, an HTML pre-processor (think Sass, but for HTML). Like any style guide worth it’s salt, I wanted to have a block of the markup for each element alongside a representation of the element itself (example). That way, a person could grab that block of code to use that element.

The problem of syntax highlighting is easily solved with the amazing Prism JS library, but it took me forever to figure out how to not render the Haml inside the Haml <pre> and <code> tags. The answer is a filter called :preserve. Other than this blog post by the wise Chris Eppstein, I have found 90% of Haml documentation incredibly cryptic, at least by my standards which, granted, as a front-end and WordPress developer may be quite high.

That being said…

In the hopes of saving someone somewhere a bit of time and headache, here, officially, is how to render a code block of Haml in Haml:

See the Pen A Code Block of Haml in Haml by Lara Schenck (@laras126) on CodePen.


What do you think? Do you have any questions, thoughts, or related links to share? Did I make a mistake in my post?

Submit a Comment

Pssst...developer note: This is the most basic comment implentation you can possibly imagine, and it's on my list to flesh it out. But...I'm not using Disqus anymore, so that's cool! 👍