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?
You don't need any plugins to do this.
Just select all lines (CTRL+A) and then from the menu select Edit → Line → Reindent.
This will work if your file is saved with an extension that contains HTML like .html or .php.
If you do this often, you may find this key mapping useful:
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }
If your file is not saved (e.g. you just pasted in a snippet to a new window), you can manually set the language for indentation by selecting the menu View → Syntax → language of choice before selecting the reindent option.
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:
Reindent command
Pros:
Ships with Sublime, so no plugin install needed
Cons:
Doesn't delete extra blank lines
Can't handle minified HTML, lines with multiple open tags
Doesn't properly format <script> blocks
Tag
Pros:
Supports ST2/ST3
Removes extra blank lines
No binary dependencies
Cons:
Chokes on PHP tags
Doesn't handle <script> blocks correctly
HTMLTidy
Pros:
Handles PHP tags
Some settings to tweak formatting
Cons:
Requires PHP (falls back to web service)
ST2 only
Abandoned?
HTMLBeautify
Pros:
Supports ST2/ST3
Simple and no binaray dependencies
Support for OS X, Win and Linux
Cons:
Chokes a bit with inline comments
Does not expand minimized or compressed code
HTML-CSS-JS Prettify
Pros:
Supports ST2/ST3
Handles HTML, CSS, JS
Great integration with Sublime's menus
Highly customizable
Per-project settings
Format on save option
Cons:
Requires Node.js
Not great for embedded PHP
Which is best?
HTML-CSS-JS Prettify is the winner in my book. Lots of great features, not much to complain about.
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.
I recommend this plugin: HTML/CSS/JS Prettify, It really works.
After the installation, just select the code and press CTRL+SHIFT+H.
Done!
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 :)
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.
For me, the HTML Prettify solution was extremely simple. I went to the HTML Prettify page.
Needed the Sublime Package Manager
Followed the Instructions for installing the package manager here
typed CMD+SHIFT+P to bring up the menu
Typed prettify
Chose the HTML prettify selection in the menu
Boom. Done. Looks great
There's a plugin called SublimeHtmlTidy which works pretty well
https://github.com/welovewordpress/SublimeHtmlTidy
Simply go to
Edit -> Tag -> Auto-format tags on document
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!
https://github.com/rareyman/HTMLBeautify
I think this is what you're looking for:
https://github.com/victorporof/Sublime-HTMLPrettify
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>. Upgrade to a different browser or install Google Chrome Frame 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]-->
There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.
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.
you can set shortcut key F12 easy!!!
{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }
see detail here.
HTML-CSS-JS Prettify - Hands down the best.
Install Package Control
⌘ + left shift + p (or ctrl + alt + left shift + p) -> Package Control: Install Package
Enter HTML-CSS-JS Prettify
Install node
Restart Sublime Text
Enjoy.
I am trying to make something pretty easy and for some reason i can't. Generally with Emmet on html i don't have any problem, but i wanna make something custom. On javascript, when i type log i want on Tab should generate console.log() and write pointer inside (). I have searched folder with packages installed but i didn't find somewhere i could put code on. Also on the google i didn't find something that can help, i had this thing on the ATOM but i also can't find how they have it there.
You don't need Emmet for that, just create a snippet in Sublime Text.
Example:
<snippet>
<content><![CDATA[console.log($1)]]></content>
<tabTrigger>log</tabTrigger>
<scope>source.js</scope>
</snippet>
If you need this to work for HTML as well, you could change the scope to source.js,text.html
I have sublime text 3 and emmet and am trying to use Emmet but a few things are broken/ I am using completion.
ul+< tab >
gives
<ul>
</ul>
Also
input:text
outputs
inupt:<table></table>
Is sublime hijacking the the completion.
If I remember correctly, Sublime Text hides the completion popup by default when working in the text scope. The scope for HTML is text.html, so that behaviour is inherited. Add the text (or text.html) scope to auto_complete_selector in your user settings. Now, when you type code, you should see a completion popup, that allows you to select different types of completion. Personally, I have Emmet and the HTML5 package installed, so when typing ul I'm seeing two completion entries to choose from. I suspect that you're triggering the wrong completion.
The HTML5 package completes ul to <ul>|</ul>, while Emmet completes to <ul><li>|</li></ul> (over multiple lines.)
So, theree might indeed be another package interfering with Emmet. The completion popup should make it easier to see if that's the case. Otherwise, you will have to disable all your packages to narrow down the problem.
I have a plugin that I installed that does this:
I really like this function (highlighting HTML colors) but I don't know plugin does it. I want to put it on the another copy of Notepad++ but installing plugins is a rather big thing and I don't want to have to install them all - it gets cumbersome.
Does anyone know which plugin highlights my colors?
It's a wonderful feature.
I think that you are referring to the HTML Color plugin. You can find it here
http://npp.campulka.net/
I think that feature was taken out of Notepad++ due to the users' inability to read the text at times if the colors were too overwhelming. Instead, I recommend trying to install the Quick Color Picker or HTML Color plugins. They are about as close as you're going to get:
Quick Color Picker: https://code.google.com/p/nppqcp/
HTML Color: http://npp.campulka.net/
Source: Notepad++ hover preview on link or color?
Check Quick Color Picker for Notepad++.
The plugin puts the colored underline under the color code based on it's value and thus is not obtrusive in reading the text.
I'm using it without any issues with the Notepad++ v6.9.2
I just ran into this and resolved it as follows:
Download and install the UDL file found at https://github.com/notepad-plus-plus/userDefinedLanguages (get the zip file with all languages). Instructions for installation are on that page. Close Notepad++ and reopen, then go in your Notepad++ menu to "Language". You should now see a long alphabet list with subcategories off to the right indicated by an > Go to H then click on the > and select HTML with your HTML file open in Notepad++ The moment you do that, all your HTML syntax will (should!) be highlighted.
Forgive me if this is has been answered. I have looked around, but didn't find anything.
I am creating a site for non-techies and it requires them to be able to add rich text content. I have been looking at Markdown for this, and would like to use that.
I have been searching around for a nice (jquery) ui control to make editing simple, but everything I have looked at has the live preview living somewhere else on the page other than the input box. (WMD is like this, markitup, etc..)
I would like to use something that makes it feel like you are using a word processor. Like how TinyMCe does it, but running on Markdown, not HTML
Is there anything like that, or maybe somewhere that shows how to build it?
To clarify, I'm looking for an editor that makes it feel like you are typing in the live preview; not a textbox with a preview above/below.
If I get what you're looking for, then the simplest approach would be to generate HTML with TinyMCE or CKEditor, then apply something like Markdownify to the output of e.g., tinymce.getContent().
I have since found something that I love. the Pen editor on Github does just what I wanted. I am glad to see someone has taken this on
Check out Stack Edit It's a great WYSIWYG markdown editor - syncs with Google Docs, Dropbox & CouchDB, publishes to Github (and many other places), and offers easy link sharing. You can access it on their website or using the Chrome app. You can create titles and lists in the editor there, and it will show you the corresponding text in markdown format. You can then save, publish, share, or download the file.
Markdown would not be compatible with a WYSIWYG editor. Consider this sample Markdown:
Let's link to [Google][].
[Google]: http://www.google.com/
If you were making a WYSIWYG editor, what would happen after you typed [Google]? Would you see blue underlined text? Would you just see [Google] since it's not a valid hyperlink yet? What about after you type the trailing []? It's still not a fully-defined hyperlink; you can't click it, because Markdown doesn't know where it links.
And how does the user type that [Google]: http://www.google.com/ follow-up line? That line isn't displayed; it's markup; it's invisible. Where do you type invisible text into a WYSIWYG editor?