Latest Threat ResearchGlassWorm Loader Hits Open VSX via Developer Account Compromise.Details
Socket
Book a DemoInstallSign in
Socket

prettify

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

prettify

{{prettify}} handlebars helper, for formatting (beautifying) output HTML.

Source
npmnpm
Version
0.1.4
Version published
Weekly downloads
5.9K
20.47%
Maintainers
1
Weekly downloads
 
Created
Source

{{prettify}} NPM version

{{prettify}} handlebars helper, for formatting (beautifying) output 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 --save

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

Indent Example

Before

Using the indent option:

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}}

After

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>

Condense Example

Before

<!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 condensed: true:

After

<!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

When used with condense, defining newlines: true will result in something like this:

<!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

Author

Licensed under the MIT License Copyright (c) Jon Schlinkert, contributors.

Keywords

beautify

FAQs

Package last updated on 17 Sep 2013

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts