helper-prettify

{{prettify}} handlebars helper for formatting (beautifying) HTML, JavaScript and CSS.

{{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.

In the root of the project in which you plan to use the helper, in the command line run:

npm i prettify

Use this helper in a "parent" layout:

{{#prettify}}
  {{> body }}
{{/prettify}}

_See nested layouts_.

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. 
    }
  }
});

Options passed in as hash arguments will override options defined in the Gruntfile:

{{#prettify indent="4"}}
  {{> body }}
{{/prettify}}

Type: Boolean Default value: true

Removes extra newlines and retains indenting:

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>

Type: Number Default value: 2

The indentation size to be used on the output HTML. Alias for indent_size

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>

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>

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>

Nothing yet


Project authored by Jon Schlinkert.