Q:

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 (|) ?

A:

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

