What is a vertical strip in jade?

To convert HTML to jade, 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 vertical bars ( | )?

+7
pug
source share
2 answers

This is simply the best visualization of plain text in jade patterns. see https://pugjs.org/language/plain-text.html

+7
source share

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

FYI, what he says is simple:

The easiest way to add plain text to templates is to prefix a string with | (pronounced "pipe").

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

+1
source share

All Articles