Helper-prettify NPM

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 prettify

Usage

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>