html2pug
Converts HTML to Pug templating language (formerly Jade).
Requires Node.js version 7.6 or higher. Library written in typescript.
Turns this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
const foo = true;
let bar = function() {};
if (foo) {
bar(1 + 5)
}
</script>
</head>
<body>
<h1>Pug - node template engine</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<div class="col" id="container">
<p>You are amazing</p>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>
</body>
</html>Into this
doctype html
html
head
title Jade
script(type="text/javascript").
const foo = true;
let bar = function() {};
if (foo) {
bar(1 + 5)
}
body
h1 Pug - node template engine
nav(aria-label="breadcrumb"): ol.breadcrumb: li.breadcrumb-item.active(aria-current="page") Home
#container.col
p You are amazing
p
| Jade is a terse and simple
| templating language with a
| strong focus on performance
| and powerful features.Programmatically
import Parser from "@nmyvision/html2pug"
const parser = new Parser({ tabs: true, collapse: true })
/* new Parser(undefined) ... for defaults */
const html = '<header><h1 class="title">Hello World!</h1></header>'
const pug = parser.parse(html)Options
| Name | Version | Type | Default | Description |
|---|---|---|---|---|
| tabs | all | Boolean | false |
Use tabs instead of spaces |
| collapse | all | Boolean | true |
Combine when possible using : notation |
| commas | v2 | Boolean | false |
Add commas between attributes |
| doubleQuotes | v2 | Boolean | true |
Use double quotes |
| tabs | v2 | Boolean | false |
Use tabs (tabChar) otherwise use (whitespaceChar) |
| preserveTags | v2 | Boolean | ['script', 'pre'] |
element renders with . ending |
| tabChar | v2 | Boolean | '\t' |
system tab character |
| whitespaceChar | v2 | Boolean | ' ' |
two spaces |
Why
Why even create another HTML 2 Pug/Jade library?
There were a few scenerios that most libraries didn't address.
- Shorthand
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li>Sample</li>
</ol>
</nav>
nav(aria-label="breadcrumb"): ol.breadcrumb: li Sample
- Proper handle of non typical classnames
<ol class="sm:hover x-translate-1/2">
Stuff
</ol>
ol(class="sm:hover x-translate-1/2")
| Stuff