ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

HTMLBeautify

by rareyman ALL Top 100

A plugin for Sublime Text that formats (indents) HTML source code. It makes code easier for humans to read.

Details

  • 2018.03.01.21.41.57
  • github.​com
  • github.​com
  • 2 years ago
  • 1 hour ago
  • 8 years ago

Installs

  • Total 590K
  • Win 354K
  • Mac 149K
  • Linux 87K
Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4 Mar 3 Mar 2 Mar 1 Feb 29 Feb 28 Feb 27 Feb 26 Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16 Feb 15
Windows 182 188 160 158 208 256 225 216 233 154 166 186 211 219 193 180 134 146 225 232 202 195 227 139 129 176 185 217 236 197 137 140 187 229 205 187 222 143 148 192 200 196 189 182 117 146
Mac 46 55 37 37 52 63 44 53 50 30 41 50 66 60 57 49 40 27 44 39 54 53 37 21 39 50 48 36 58 52 22 28 42 59 46 48 40 24 29 45 57 58 50 45 30 29
Linux 34 38 36 35 25 44 38 46 30 39 24 32 49 39 41 38 34 31 20 33 24 33 27 22 30 43 37 34 37 33 22 26 36 44 44 39 34 20 23 34 37 33 32 40 22 33

Readme

Source
raw.​githubusercontent.​com

HTMLBeautify v0.85

SublimeText (version 2 & 3)

  • (Inspired by fhtml.pl by John Watson)
  • by Ross A. Reyman
  • 20 February 2015
  • url: http://reyman.name/
  • e-mail: ross[at]reyman[dot]name

A plugin for Sublime Text , that formats (indents) HTML source code. It makes code easier for humans to read.


Key Commands Reverted Back to Original

Due to a conflict with other keymaps in Sublime Text, I am reverting the keymap back to the original setting:

  • Mac OS X: Command-Option-Shift-F
  • Windows: Control-Alt-Shift-F
  • Linux: Control-Alt-Shift-F

(To change this, see instructions later in this README…)

Notes

  • This script assumes an effort has been made by the user to expand tags to different lines. This script will not automatically expand minimized/compressed code—it will only try to “clean-up” code that needs to be re-indented
    • However, you can use multiple cursors (Find All) or use Replace on the beginning of a tag < to put every tag on a new line before applying beautify, which will help in this case.
  • Currently, this script chokes a bit with inline comments.

    • For example:

      <div class="something">

    • So, a workaround is to keep comments on their own lines:

      <div class="something">

    • (TODO: Fix this!)

  • This script uses \t characters to create indentation levels and spacing—ST appears to honor whether the user prefers spaces or tabs in ST settings and adjusts accordingly.

  • Use tag_pos_inline setting to define tags that might appear on one line.

  • Windows Users: You must restart Sublime Text to complete the installation.

Installation (Package Control)

If you have Package Control installed in Sublime Text:

  • Open the Command Palette (Tools > Command Palette…)
  • Search for and choose “Package Control: Install Package” (give it a few seconds to return a list of available packages)
  • Search for “HTMLBeautify” and install.
  • Windows users will need to restart Sublime Text to finish the installation.

Installation (Manual)

  • Download the zip, re-name resulting folder to: HTMLBeautify, then put the folder into your Sublime Text Packages folder.

Usage

  • Open a file containing HTML.
  • Select HTML code you want to beautify. (If no selection is made the plugin will run on the whole file.)
  • Use the appropriate key command to run HTMLBeautify—or use HTMLBeautify from the Edit menu.
  • You can test the script with HTMLBeautifyTest.html: an HTML file with wacky indenting so you to see how this script works.

Settings

You can configure which tags should be processed with this script:

  • ignored_tag_opening : What are the opening tags that tell the script to ignore HTMLBeautify formatting?
  • ignored_tag_closing : What are the closing tags that tell the script to resume HTMLBeautify formatting?

  • tag_indent : If one of these opening tags is encountered, the contents (next line) will be indented by one level.

  • tag_unindent : If one of these closing tags is encountered, the next line will be un-indented one level.

  • tag_unindent_line : If one of these closing tags is encountered, this line is un-indented one level.

  • tag_pos_inline : These are special “one line” tags that open and close on the same line, so indenting should be ignored.

  • remove_extraline : Set true to remove empty line.

Changing the Key Binding

You can create your own custom keymap (key command/macro) in your keymap file: Packages/User/Default[OS].sublime-keymap

{
    "keys": ["super+alt+shift+f"], //  create your own key command combination here!
    "command": "html_beautify", // command that executes html_beautify
    "context": [{
        // these options ensure that the command is executed in the right files/context
        "key": "selector",
        "operator": "equal",
        "operand": "text.html,text.html.twig,text.twig,source.html,source.html.twig,source.twig"
    }]
}

For more details: Sublime Text Unofficial Documentation: Key Bindings

Disclaimer

This script has been tested for basic HTML coding situations, but your mileage may vary—use with caution if using this in a production environment. (Please report bugs or contribute corrections to the script!) Although the script does not remove or modify code directly (it only attempts to adjust indentation levels), be sure to test this script throughly to make sure it works as expected! The author is not responsible for any bugs that might be introduced to your HTML. :)