helper-prettify
v0.1.7
Published
{{prettify}} handlebars helper for formatting (beautifying) HTML, JavaScript and CSS.
Downloads
21
Readme
{{prettify}}
A Handlebars helper for prettifying rendered HTML.
This helper is based on grunt-prettify, which depends on and extends js-beautify. To learn about additional options, please visit those projects.
Quickstart
In the root of the project in which you plan to use the helper, in the command line run:
npm i prettifyUsage
Use this helper in a "parent" layout:
{{#prettify}}
{{> body }}
{{/prettify}}See nested layouts.
Options
task options
Options can be set in your Gruntfile, in the prettify object in the Assemble task or target options:
grunt.initConfig({
assemble: {
options: {
prettify: {
indent: 4
}
},
docs: {
// Target-specific file lists and/or options go here.
}
}
});hash options
Options passed in as hash arguments will override options defined in the Gruntfile:
{{#prettify indent="4"}}
{{> body }}
{{/prettify}}condense
Type: Boolean
Default value: true
Removes extra newlines and retains indenting:
newlines
Type: Boolean
Default value: True
Add a newline above each code comment:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- code comment -->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>My Blog</h1>
<h2>Post of the day</h2>
<!-- scripts -->
<a href="#">Read more...</a>
</body>
</html>indent
Type: Number
Default value: 2
The indentation size to be used on the output HTML. Alias for indent_size
Usage Examples
indent
Template: index.hbs
{{#prettify indent="2"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>My Blog</h1>
<h2>Post of the day</h2>
<p>
Vestibulum posuere, quam sed bibendum posuere
Pellentesque habitant morbi tristique senectus
Pellentesque nulla augue, volutpat vitae
</p>
<a href="#">Read more...</a>
</body>
</html>
{{/prettify}}Renders to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>My Blog</h1>
<h2>Post of the day</h2>
<p>
Vestibulum posuere, quam sed bibendum posuere
Pellentesque habitant morbi tristique senectus
Pellentesque nulla augue, volutpat vitae
</p>
<a href="#">Read more...</a>
</body>
</html>condensed
Example output with condensed: true:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- code comment -->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>My Blog</h1>
<h2>Post of the day</h2>
<!-- scripts -->
<a href="#">Read more...</a>
</body>
</html>newlines
Example output with newlines: true:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- code comment -->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>My Blog</h1>
<h2>Post of the day</h2>
<!-- scripts -->
<a href="#">Read more...</a>
</body>
</html>Release History
Nothing yet
Project authored by Jon Schlinkert.