dimensixhtml2pug
Converts HTML and Vue like syntax to Pug templating language.
Requires Node.js version 14 or higher.
Turns this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World!</title>
</head>
<body>
<div id="content">
<h1 class="title">Hello World!</h1>
</div>
</body>
</html>Into this
doctype html
html(lang='en')
head
title Hello World!
body
#content
h1.title Hello World!Install
Get it on npm:
npm install -g xhtml2pugUsage
CLI
Accept input from a file or stdin and write to stdout:
# choose a file
xhtml2pug < example.html
# use pipe
echo '<h1>foo</h1>' | xhtml2pug -fWrite output to a file:
xhtml2pug < example.html > example.pugSee xhtml2pug --help for more information.
Programmatically
import { convert } from "xhtml2pug";
const html = '<header><h1 class="title">Hello World!</h1></header>';
const pug = convert(html, { symbol: '\t' });Cli Options
-b, --bodyLess Don't wrap into html > body
[boolean] [default: false]
-t, --tabs Use tabs as indent [boolean] [default: false]
-s, --spaces Number of spaces for indent [number] [default: 2]
-a, --attrComma Commas in attributes [boolean] [default: false]
-e, --encode Encode html characters [boolean] [default: true]
-q, --doubleQuotes Use double quotes for attributes[boolean] [default: false]
-i, --inlineCSS Place all classes in class attribute
[boolean] [default: false]
-c, --classesAtEnd Place all classes after attributes
[boolean] [default: false]
-p, --parser html for any standard html, vue for any vue-like html
[string] [choices: "html", "vue"] [default: "html"]Api Options
export interface PublicOptions {
/** Don't wrap into html > body */
bodyLess: boolean;
/** Commas in attributes */
attrComma: boolean;
/** Encode html characters */
encode: boolean;
/** Use double quotes for attributes */
doubleQuotes: boolean;
/** Place all classes in class attribute */
inlineCSS: boolean;
/** Symbol for indents, can be anything */
symbol: string;
/** Html for any standard html, vue for any vue-like html */
parser: "html" | "vue";
/** Place all classes after attributes */
classesAtEnd: boolean;
}