beautify-html 🎨
A simple customisable NPM package
Install
Using npm:
npm i beautify-html
Setting up
Import the package with ES6 modules:
import beautify from "beautify-html";Include the js file in the HTML document:
<script type="module" src="yourfile.js"></script>Apply the styling
To apply the styling, call the beautify function with the type of theme you want and primary color.
Syntax
beautify(theme, color, [, optIn?: boolean])Examples
import beautify from "beautify-html";
// light theme with blue primary color
beautify("light", "blue");
// dark theme with purple primary color
beautify("dark", "purple");Before
After
List of themes and colors
Themes:
- light
- dark
Colors:
- blue
- red
- purple
- green
- orange
Using classes
You can opt in into styling the document per element, similary of how you would use bootstrap for example.
Attributes included are:
- .beautify-text
- .beautify-title
- .beautify-input
- .beautify-button
- .beautify-link
- .beautify-hr
- .beautify-table
- .beautify-ul
Examples
import beautify from "beautify-html";
// setting the opt in parameter to true will enable
// stying only to selected elements
beautify("light", "blue", true);<body>
<h1 class="beautify-title">Lorem Ipsum</h1>
...
<form method="get">
...
<input class="beautify-input" type="text" />
...
<input class="beautify-button" type="submit" />
...
</form>
...
</body>License
MIT