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 (|
) ?
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.
It is just a better visualization of plain text in jade templates. see https://pugjs.org/language/plain-text.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With