Skip to content

Latest commit

 

History

History
163 lines (125 loc) · 5.42 KB

readme.md

File metadata and controls

163 lines (125 loc) · 5.42 KB

beautify

A posthtml plugin to beautify you html files

Travis Build StatusAppVeyor Build Statusnodenpm versionDependency StatusXO code styleCoveralls status

npm downloadsnpmPackage Quality

Why?

Format your html and inline css markup according to the HTML5 syntax Style Guide, Code Guide. Full list of supported options:

  • Transform lower case element names
  • Transform lower case attribute names
  • Only double quotes
  • Close all html elements
  • Removing trailing slash in self-closing
  • Removes spaces at the equal sign
  • Add blank lines to separate large or logical code blocks
  • Add 2 spaces of indentation. Do not use TAB.
  • Add language attribute
  • Add character encoding
  • Attribute order
  • Boolean attributes
  • Creates file from the inline styles
  • Create scoped class name (use css-modules) instead inline styles
  • validate elements and attributes name
  • parses Internet Explorer Conditional Comments (not support Downlevel-revealed and valid version, htmlparse2 invalid parses)

Install

npm i -S posthtml posthtml-beautify

Note: This project is compatible with node v4+

Usage

import {readFileSync, writeFileSync} from 'fs';
import posthtml from 'posthtml';
import beautify from 'posthtml-beautify';

const html = readFileSync('input.html', 'utf8');

posthtml()
    .use(beautify({rules: {indent: 4}}))
    .process(html)
    .then(result => {
        writeFileSync('output.html', result.html);
    });

Returns html-formatted according to rules based on the use HTML5 syntax Style Guide, Code Guide with custom settings indent: 4

Example

input.html

<!DOCTYPE html>
<head><link href="main.css" rel="stylesheet" type="text/css">
  <!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css"><![endif]--><!--[if IE 6]><link href="ie6.css" rel="stylesheet" type="text/css"><![endif]--><!--[if IE 5]><link href="ie5.css" rel="stylesheet" type="text/css"><![endif]--></head>
 <table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>
    <div>
<DIV class="first">
                first</div>   <div class="middle"></div>
<div CLASS="last">last <b>line  </b> <a href="#">            test</a></div>

</div>
<img src="img.png" alt=""><input type="text" required>

output.html

<!DOCTYPE html>

<head>
  <link href="main.css" rel="stylesheet" type="text/css">

  <!--[if IE 7]>
    <link href="ie7.css" rel="stylesheet" type="text/css">
  <![endif]-->

  <!--[if IE 6]>
    <link href="ie6.css" rel="stylesheet" type="text/css">
  <![endif]-->

  <!--[if IE 5]>
    <link href="ie5.css" rel="stylesheet" type="text/css">
  <![endif]-->
</head>

<table>
  <tr>
    <th>Name</th>

    <th>Description</th>
  </tr>

  <tr>
    <td>A</td>

    <td>Description of A</td>
  </tr>

  <tr>
    <td>B</td>

    <td>Description of B</td>
  </tr>
</table>

<div>
  <DIV class="first">first</DIV>
</div>

<div class="middle"></div>

<div class="last">
  last

  <b>line</b>

  <a href="#">test</a>
</div>

<img src="img.png" alt="">

<input type="text" required>

Options

rules

Type: Object
Default:

  • Indent
    Type: Number|String(only tab)
    Default: 2
    Description: A numeric value indicates specifies the number of spaces. The string value only tab

  • eol (end of line)
    Type: String
    Default: '\n'
    Description: As value is a string symbol which is added to the end of the row

  • eof (end of file)
    Type: String|boolean
    Default: '\n'
    Description: As value is a string symbol which is added to the end of the file and will not adds if you specify a boolean value of false