How to let a line end with | (pipe) in HAML?

Question

The problem is that a | at the end of a line (seperated by whitespace) is recognized as syntax for advanced line-breaks. What to do if you want to get this character as output?

Example

Say you want to create a menu like

Section 1 | Section 2 | ...

Note: if this is just what you want then take a look at concatenate link_to with pipe.

Wether or not a link is shown depends on a certain condition. In HAML/Ruby on Rails this could look like which does not work

%div.menu
    -if condition1?
        #{link_to 'Section 1', section_1_path} |
    -if condition2?
        #{link_to 'Section 2', section_2_path} |
    -if condition3?
        ...

Work-around

As a (somehow dirty) work-around I changed the code:

%div.menu
    -if condition1?
        #{link_to 'Section 1', section_1_path} #{'|'}
    -if condition2?
        #{link_to 'Section 2', section_2_path} #{'|'}
    -if condition3?
        ...

Answer 1

No need for escaping, just the same indentation than the element u want separated.

%div.menu
  -if condition1?
    #{link_to 'Section 1', section_1_path} 
    |
  -if condition2?
    #{link_to 'Section 2', section_2_path} 
    |
  -if condition3?
      ...

you can try this in browser: online haml editor: rendera or html2haml

Answer 2

The Haml parser look fo the | character preceded by whitespace to signify a multiline block. You could use this to create a workaround by using a HTML character reference instead of a normal space in your Haml:

%div.menu
  -if condition1?
    #{link_to 'Section 1', section_1_path} |
  -if condition2?
    #{link_to 'Section 2', section_2_path} |
  -if condition3?
    ...

This way Haml won’t see the space so will treat the pipe as a literal, but the space will appear in the browser.

Whether you prefer this workaround to your own is likely a matter of taste. In this particular case I think a css based solution would be better, but that would depend on what browsers you need to support.

Answer 3

Menu should be a list so make it an unordered list and in CSS:

.menu ul li:after {
  content: '|';
}