2 Mar 2013

Ruby/Haml: Maintaining white space/indentation in a <pre> tag

I’ve been writing a little web app in which I wanted to display cypher queries inside a tag which was then prettified using SyntaxHighlighter but I was having problems with how code on new lines was being displayed.

I had the following Haml code to display a query looking up Gareth Bale in a graph:

%pre{ :class => "brush: cypher; gutter: false; toolbar: false;"}
  START player = node:players('name:"Gareth Bale"')
  RETURN player.name

When I rendered the page it looked like this:

After a bit of googling I ended up on this Stack Overflow post which described the preserve helper which seems to do the job:

%pre{ :class => "brush: cypher; gutter: false; toolbar: false;"}
  = preserve do
    START player = node:players('name:"Gareth Bale"')
    RETURN player.name

That part of the page now looks much better:

About the author

I'm currently working on short form content at ClickHouse. I publish short 5 minute videos showing how to solve data problems on YouTube @LearnDataWithMark. I previously worked on graph analytics at Neo4j, where I also co-authored the O'Reilly Graph Algorithms Book with Amy Hodler.