Package Exports

grunt-prettify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (grunt-prettify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

grunt-prettify

HTML prettifier with a number of options for formatting HTML the way you like it.

Getting Started

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-prettify --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-prettify');

Prettify task

Run this task with the grunt prettify command.

Overview

In your project's Gruntfile, add a section named prettify to the data object passed into grunt.initConfig().

grunt.initConfig({
  prettify: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    }
  }
});

Options

condense

Type: Boolean Default value: true

Removes extra newlines and retains indenting.

indent_size

Type: Number Default value: 2

The indentation size to be used on the output HTML.

indent_char

Type: String Default value: ' ' (space) Options: space|tab (use an actual space or tab, not the word)

Character with which to indent the output HTML.

indent_scripts

Type: String Default value: normal Options: keep|separate|normal

The indentation character to use to indent the output HTML.

indent_inner_html

Type: Boolean Default value: true

Indent <body></body> and <head></head> sections.

brace_style

Type: String Default value: collapse

Options:

collapse: (default) puts braces on the same line as control statements
expand: put all braces on their own lines (Allman / ANSI style)
end-expand: put end braces only on their own line.

wrap_line_length

Type: Number Default value: 0 (disabled)

Maximum characters per line. 0 disables, max is 250.

preserve_newlines

Type: Boolean Default value: true

Preserve existing line-breaks.

max_preserve_newlines

Type: Number Default value: unlimited

Maximum number of consecutive line-breaks to be preserved.

unformatted

Type: String|Array Default value: ["pre", "code"]

Array of tags that should not be re-formatted in the output. Defaults to inline.

Attention: Make sure you play around with the settings and view the HTML in the browser. Pay special attention to whitespace around links and other inline elements, such as <strong> and <span>. If you specify a list of elements to remain unformatted, you will definitely need to make sure that whitepace is rendering the way you want it to.

Usage Examples

Default Options

The default setup in this project's Gruntfile uses an external .prettifyrc file for controlling the task's options.

grunt.initConfig({
  prettify: {
    options: {
      prettifyrc: '.prettifyrc'
    },
    files: {
      'pretty/index.html': ['ugly/index.html']
    }
  }
});

The default options are set to:

{
  "indent_size": 2,
  "indent_char": " ",
  "indent_scripts": "normal",
  "wrap_line_length": 0,
  "brace_style": "collapse",
  "preserve_newlines": true,
  "max_preserve_newlines": 1,
  "unformatted": [
    "a",
    "abbr",
    "acronym",
    "address",
    "b",
    "bdo",
    "big",
    "cite",
    "code",
    "del",
    "dfn",
    "dt",
    "em",
    "font",
    "i",
    "ins",
    "kbd",
    "pre",
    "q",
    "s",
    "samp",
    "small",
    "span",
    "strike",
    "strong",
    "sub",
    "sup",
    "tt",
    "u",
    "var"
  ]
}

Custom Options

You can also specify the options in the Gruntfile if you wish, like this:

prettify: {
  options: {
    indent_size: 2,
    indent_char: ' ',
    wrap_line_length: 78,
    brace_style: 'expand',
    unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
  },
  ...
}

Example configurations for prettifying one file at a time, or entire directories of files:

prettify: {
  options: {
    prettifyrc: '.prettifyrc'
  },
  // Prettify a directory of files
  all: {
    expand: true,
    cwd: 'test/actual/ugly/',
    ext: '.html',
    src: ['*.html'],
    dest: 'test/actual/pretty/'
  },
  // Or prettify one file at a time using the "files object" format
  files: {
    'pretty/index.html': ['ugly/index.html']
  },
  // Or the "compact" src-dest format
  one: {
    src: 'test/actual/ugly/index.html',
    dest: 'test/actual/pretty/index.html'
  }
}

See the grunt docs for more information about task configuration.

Author

Jon Schlinkert

Thanks!

Also, this plugin is based on and uses js-beautifier. "Thank you" to authors and contributors of that project!

Written by Nochum Sossonko, nsossonko@hotmail.com
Based on code initially developed by: Einar Lielmanis
Many other contributors
Visit the project

Release History

2013-08-18 v0.2.7 Options updated to use new config option from js-beautify.
2013-04-21 v0.1.1 Create plugin, run tests. Add assemble task to generate test HTML from templates.
2013-04-21 v0.1.0 First commit.

Project authored by Jon Schlinkert.

This file was generated on Sun Aug 18 2013 14:12:23.