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.