Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is a vertical bar in jade?

Tags:

pug

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

like image 568
Stefan Avatar asked Mar 14 '16 17:03

Stefan


2 Answers

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.

like image 92
Danora Avatar answered Jan 22 '23 18:01

Danora


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

like image 33
burnedikt Avatar answered Jan 22 '23 17:01

burnedikt