I've got some poorly-formatted HTML code that I'd like to reformat. Is there a command that will automatically reformat HTML code in Sublime Text 2 so it looks better and is easier to read?
This question is related to
html
sublimetext2
sublimetext
indentation
reformat
For me, the HTML Prettify
solution was extremely simple. I went to the HTML Prettify page.
Sublime Package Manager
prettify
HTML prettify
selection in the menuBoom. Done. Looks great
Simply go to
Edit -> Tag -> Auto-format tags on document
There's a plugin called SublimeHtmlTidy which works pretty well
HTML-CSS-JS Prettify - Hands down the best.
Enjoy.
There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.
I am yet to have the privilege to comment so this is simply additional information related to @peter's answer above answer.
I found HTML did not align as expected if IE conditional comments in the header were not completely in-line e.g. flush to the left:
<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I recommend this plugin: HTML/CSS/JS Prettify, It really works.
After the installation, just select the code and press Ctrl+Shift+H.
Done!
I created a Package called HTMLBeautify that does a decent job of reformatting HTML. I based it off of a Perl script I found back in 1997—I updated it to work with all the new fangled modern tags. :)
Check it out and let me know what you think!
Just a general tip. What I did to auto-tidy up my HTML, was install the package HTML_Tidy, and then add the following keybinding to the default settings (which I use):
{ "keys": ["enter"], "command": "html_tidy" },
this runs HTML Tidy with every enter. There may be drawbacks to this, I'm quite new to Sublime myself, but it seems to do what I want :)
The only package I've been able to find is Tag.
You can install it using the package control. https://sublime.wbond.net
After installing package control. Go to package control (Preferences -> Package Control) then type install
, hit enter. Then type tag
and hit enter.
After installing Tag, highlight the text and press the shortcut Ctrl+Alt+F.
you can set shortcut key F12 easy!!!
{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }
see detail here.
There are half a dozen or so ways to format HTML in Sublime. I've tested each of the most popular plugins (see the writeup I did on my blog for full details), but here's a quick overview of some of the most popular options:
Pros:
Cons:
<script>
blocksPros:
Cons:
<script>
blocks correctlyPros:
Cons:
Pros:
Cons:
Pros:
Cons:
HTML-CSS-JS Prettify is the winner in my book. Lots of great features, not much to complain about.
Altough the question is for HTML, I would also additionally like to give info about how to auto-format your Javascript code for Sublime Text 2;
You can select all your code(ctrl + A) and use the in-app functionality, reindent(Edit
-> Line
-> Reindent
) or you can use JsFormat formatting plugin for Sublime Text 2
if you would like to have more customizable settings on how to format your code to addition to the Sublime Text's default tab/indent settings.
https://github.com/jdc0589/JsFormat
You can easily install JsFormat with using Package Control (Preferences
-> Package Control
) Open package control then type install, hit enter. Then type js format
and hit enter, you're done.
(The package controller will show the status of the installation with success and errors on the bottom left bar of Sublime
)
Add the following line to your key bindings (Preferences
-> Key Bindings User
)
{ "keys": ["ctrl+alt+2"], "command": "js_format"}
I'm using ctrl + alt + 2, you can change this shortcut key whatever you want to. So far, JsFormat
is a good plugin, worth to try it!
Hope this will help someone.
I'm using tidy together with custom build system to prettify HTML.
I have HTMLTidy.sublime-build in my Packages/User/ directory:
{
"cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}
and tidy_config.cfg file in the same directory:
indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0
And just select build system and press ctrl+b or cmd+b to reformat file content. One minor issue with that is that ST2 does not automatically reload the file so to see the results you have to switch to some other file and back (or to other application and back).
On Mac I've used macports to install tidy, on Windows you'd have to download it yourself and specify working directory in the build system, where tidy is located:
"working_dir": "c:\\HTMLTidy\\"
or add it to the PATH.
I think this is what you're looking for:
Source: Stackoverflow.com