HTMLBeautify
A plugin for Sublime Text that formats (indents) HTML source code. It makes code easier for humans to read.
Details
Installs
- Total 767K
- Win 475K
- Mac 183K
- Linux 109K
Dec 3 | Dec 2 | Dec 1 | Nov 30 | Nov 29 | Nov 28 | Nov 27 | Nov 26 | Nov 25 | Nov 24 | Nov 23 | Nov 22 | Nov 21 | Nov 20 | Nov 19 | Nov 18 | Nov 17 | Nov 16 | Nov 15 | Nov 14 | Nov 13 | Nov 12 | Nov 11 | Nov 10 | Nov 9 | Nov 8 | Nov 7 | Nov 6 | Nov 5 | Nov 4 | Nov 3 | Nov 2 | Nov 1 | Oct 31 | Oct 30 | Oct 29 | Oct 28 | Oct 27 | Oct 26 | Oct 25 | Oct 24 | Oct 23 | Oct 22 | Oct 21 | Oct 20 | Oct 19 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 26 | 41 | 8 | 17 | 24 | 14 | 0 | 0 | 0 | 2 | 16 | 16 | 33 | 8 | 11 | 21 | 14 | 15 | 32 | 0 | 0 | 25 | 27 | 16 | 12 | 42 | 65 | 65 | 62 | 45 | 33 | 26 | 28 | 33 | 33 | 24 | 18 | 13 | 17 | 35 | 34 | 26 | 22 | 32 | 23 | 12 |
Mac | 14 | 17 | 6 | 4 | 11 | 11 | 0 | 0 | 0 | 1 | 7 | 17 | 7 | 6 | 4 | 12 | 5 | 3 | 9 | 0 | 0 | 15 | 10 | 5 | 4 | 19 | 14 | 11 | 15 | 13 | 1 | 4 | 17 | 13 | 15 | 13 | 19 | 7 | 9 | 14 | 13 | 23 | 16 | 11 | 6 | 6 |
Linux | 6 | 5 | 2 | 0 | 4 | 5 | 0 | 0 | 0 | 0 | 8 | 5 | 5 | 5 | 4 | 7 | 6 | 4 | 2 | 0 | 0 | 9 | 8 | 5 | 7 | 8 | 11 | 9 | 5 | 7 | 3 | 5 | 8 | 13 | 15 | 8 | 5 | 4 | 4 | 4 | 7 | 10 | 8 | 8 | 4 | 3 |
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
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. :)