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

HTMLBeautify

by rareyman ST2/ST3 Top 100

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

Details

  • 2015.02.23.20.05.55
  • github.​com
  • github.​com
  • 2 years ago
  • 2 hours ago
  • 5 years ago

Installs

  • Total 325K
  • Win 181K
  • OS X 94K
  • Linux 49K
May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6 May 5 May 4 May 3 May 2 May 1 Apr 30 Apr 29 Apr 28 Apr 27 Apr 26 Apr 25 Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11
Windows 225 241 253 296 255 122 139 288 234 281 260 275 157 142 244 285 240 273 254 148 203 271 280 238 257 172 133 154 233 271 294 254 275 161 188 229 268 273 266 250 119 143 200 253 268 285
OS X 65 97 100 100 81 40 47 82 93 83 113 92 72 37 90 95 103 96 83 43 54 102 98 105 89 59 34 45 78 96 108 125 102 55 59 80 113 104 100 105 51 54 87 120 104 119
Linux 46 56 65 59 60 32 38 67 72 59 57 54 36 36 45 57 44 63 56 28 31 56 74 73 58 38 32 30 62 61 55 59 51 39 36 84 55 64 78 59 39 45 51 62 75 67

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. :)