Say you're coding HTML in Sublime Text & you want to check how it looks in a browser. Some text editors (BBEdit, for instance) have a feature that lets you open your page in a browser, but Sublime Text does not.
Active1 year, 9 months ago
- Now that I spend most of my time on a Mac, I have been in search of an equivalent text editor. Many great editors exist but I have landed on Sublime Text 2 for its developer-friendly editing window and the large selection of plugins that are available.
- Sublime Text 3 may be downloaded from the Sublime Text 3 page. This is the recommended version of Sublime Text to use, and is available for Windows, OS X and Linux. This is the recommended version of Sublime Text to use, and is available for Windows, OS X and Linux.
- Sublime text 3 is the text editor that is used by the developers to develop the websites, HTML, CSS, PHP, JAVASCRIPT, or other languages in it. This is the lightest weight text editor with more rich features in it.
- Popular Alternatives to Sublime Text for Mac. Explore 25+ Mac apps like Sublime Text, all suggested and ranked by the AlternativeTo user community. Sublime Text is a sophisticated text editor for code, html and prose - any kind of text file.
- Sublime Text is a proprietary cross-platform source code editor with a Python application programming interface (API). It natively supports many programming languages and markup languages, and functions can be added by users with plugins, typically community-built and maintained under free-software licenses.
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?
Ravi RamRavi Ram12.9k18 gold badges63 silver badges90 bronze badges
15 Answers
Verizon text code for data usage. 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:
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 →
Patrick Mlanguage of choice
before selecting the reindent option.7,0968 gold badges49 silver badges90 bronze badges
peterpeter37k5 gold badges50 silver badges89 bronze badges
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
Sublime Text 2 For Mac Html Editor
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 expand minimized/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.
Josh EarlJosh Earl12.6k14 gold badges56 silver badges90 bronze badges
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.
Java text editor windows. JEdit is a mature programmer's text editor with hundreds (counting the time developing plugins) of person-years of development behind it. To download, install, and set up jEdit as quickly and painlessly as possible, go to the Quick Start page. While jEdit beats many expensive development tools for features and ease of use, it is released as free software with full source code, provided under. Java text editor free download - DJ Java Decompiler, Text Lines Editor, EQO for Java, and many more programs. Best Video Software for the Mac How To Run MacOS High Sierra or Another OS on Your.
tristansokol3,3541 gold badge8 silver badges26 bronze badges
dardubdardub2,5893 gold badges24 silver badges29 bronze badges
I recommend this plugin: HTML/CSS/JS Prettify, It really works.
After the installation, just select the code and press Ctrl+Shift+H.
Done!
Ulf Gjerdingen1,2953 gold badges14 silver badges20 bronze badges
Peter ZhuPeter Zhu
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):
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 :)
AnnekeAnneke
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. 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
) 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.
Gokhan TankGokhan Tank3,4621 gold badge16 silver badges16 bronze badges
There's a plugin called SublimeHtmlTidy which works pretty well
Christian HagelidChristian Hagelid7,0554 gold badges36 silver badges61 bronze badges
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
jezrael407k32 gold badges425 silver badges490 bronze badges
insaineyesayinsaineyesay
Simply go to
Edit -> Tag -> Auto-format tags on document
Ricardo MartinsRicardo Martins3,8711 gold badge30 silver badges47 bronze badges
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!
RossRoss
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:
Community♦
newtriksnewtriks
There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.
side2kside2k1,8093 gold badges14 silver badges13 bronze badges
Text Editor In Mac
I think this is what you're looking for:
Allen BargiAllen Bargi10.6k8 gold badges51 silver badges58 bronze badges
I'm using tidy together with custom build system to prettify HTML.
I have HTMLTidy.sublime-build in my Packages/User/ directory:
and tidy_config.cfg file in the same directory:
Html Editor For Mac
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:
or add it to the PATH.
rchlrchl
you can set shortcut key F12 easy!!!
see detail here.
Sumeta PongpannaSumeta Pongpanna
protected by Samuel Liew♦Oct 5 '15 at 9:20
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
Would you like to answer one of these unanswered questions instead?