https://github.com/nmyvision/html2pug
https://github.com/nmyvision/html2pug
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nmyvision/html2pug
- Owner: NMyVision
- License: mit
- Created: 2018-09-23T17:10:39.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-03-11T00:22:26.000Z (over 6 years ago)
- Last Synced: 2025-01-31T20:55:52.685Z (over 1 year ago)
- Language: TypeScript
- Size: 142 KB
- Stars: 2
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html2pug
#### ✔ Documentation is for v2 which is a complete rewrite
Converts **HTML** to **Pug** templating language (_formerly Jade_).
Requires Node.js version `7.6` or higher. Library written in typescript.
Turns this :unamused:
```html
Jade
const foo = true;
let bar = function() {};
if (foo) {
bar(1 + 5)
}
Pug - node template engine
You are amazing
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
```
Into this :tada:
```pug
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
```js
import Parser from "@nmyvision/html2pug"
const parser = new Parser({ tabs: true, collapse: true })
/* new Parser(undefined) ... for defaults */
const html = '
Hello World!
'
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
***source***
```html
```
**before**
```pug
nav(aria-label="breadcrumb")
ol.breadcrumb
li Sample
```
**after** (with collapse flag)
```pug
nav(aria-label="breadcrumb"): ol.breadcrumb: li Sample
```
## Proper handle of non typical class names
**source**
```html
Stuff
Stuff
```
**before** note period "ol."
```pug
ol.(class='sm:hover x-translate-1/2')
| Stuff
.(class='sm:hover x-translate-1/2')
| Stuff
```
**after**
```pug
ol(class="sm:hover x-translate-1/2") Stuff
div(class="sm:hover x-translate-1/2") Stuff
```
---
## Some invalid results
**source**
```html
Link A | Link
```
**before**
```pug
a Link A
|
a Link B
```
**after** spaces shown with '.'
```pug
a Link A
| .|.
a Link B
```