@nmyvision/html2pug
v2.1.4
Published
A zero dependency library for converting html to Pug format. With enhanced features like tag skipping and collapsed output
Downloads
184
Readme
html2pug
Converts HTML to Pug templating language (formerly Jade).
Requires Node.js version 7.6 or higher. Library written in typescript.
Turns this :unamused:
<!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 :tada:
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