'What is a vertical bar in jade?

To convert HTML to jade is use this jade converter.

When I enter the following HTML,

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
</body>
</html>

the output is as follows:

doctype html.no-js
head
    meta(charset='utf-8')
  |   
  body
    .container
      .header
        ul.nav.nav-pills.pull-right
          li.active
            a(href='#') Home
          |           
          li
            a(href='#') About
          |           
          li
            a(href='#') Contact

What is the purpose of the vertical bars (|) ?

pug


Solution 1:[1]

It is just a better visualization of plain text in jade templates. see https://pugjs.org/language/plain-text.html

Solution 2:[2]

Quick update to @burnedikt's answer. Since Jade is now Pug due to a copyright issue with the word "Jade", the website has also changed. The current link is https://pugjs.org/language/plain-text.html#piped-text.

FYI what it says is simply:

Another way to add plain text to templates is to prefix a line with a pipe character (|). This method is useful for mixing plain text with inline tags, as we discuss later, in the Whitespace Control section.

If you are interested in doing multiline text without having to have a vertical slash (another name for the 'pipe' character) every time, check out this answer: jade template engine (under node.js): multi-line block without pipe symbol.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeff Huijsmans
Solution 2 ariel cohen

Related Questions