: Which tool can tidy/indent HTML5? I've already spent about 2 hours searching google and trying various tools but either they don't do indent tags per say or they aren't HTML5 compatible such
I've already spent about 2 hours searching google and trying various tools but either they don't do indent tags per say or they aren't HTML5 compatible such as the famous HTML tidy which was last updated 3 years ago…
N.B. I don't want to apply this to the source of a page (like PHP or JS would do) but to the code in the editor so that a clear hierarchy appears between tags.
Ideally I'd like a Mac OS X tool but I'll take any online tool and in last resot a Wine compatible one.
P.S. at the moment I use Coda from Panic
More posts by @Lengel546
8 Comments
Sorted by latest first Latest Oldest Best
Eclipse seems to do a decent job of indenting/formatting HTML5. You just use the usual format command (Ctrl-Shift-F) on an HTML file loaded in the HMTL editor and it will reformat it.
To adjust it, go to preferences --> web --> html files --> editor. You can also control validation here. (I'm using Eclipse v4.2.2.)
Note that the HTML editor requires that your Eclipse installation include the Web Tools Platform (see this answer for details).
JetBrains PhpStorm works great and intuitive with indents in HTML, CSS or PHP.
Type of indent (tabs or spaces) you can change in PHPStorm settings.
If you're looking for a Mac OS X tool that does the job, I'd say TextMate.
I usually do a lot of re-indenting and the best one that I've been able to find has been that one.
What I like is that it doesn't actually rearranges your code, but it re-indents it, in a form that checks the nesting and indents by level, not by tags.
The "Indent Selection" feature is specially useful.
I humbly suggest Espresso 2.
From their website:
The one and only CSSEdit 3 — CSSEdit's award-winning visual tools, now
inside Espresso. With awesome CSS3 support for multi-browser
gradients, shadows and more.
Web Preview with X-ray — See how your CSS affects web layouts,
visualize margins and padding, and quickly find the relevant style
rules for any page element.
Powerful and Efficient Coding — CodeSense, code folding, smart
snippets, Zen coding and the drag-and-drop Navigator help you write
better code in less time.
Live Styling and Overrides — Edit any website's CSS and see it update
in real-time. No need to save, publish or reload. Experimenting and
tweaking has never been this fun.
Effortless Sync and Publishing — With Quick Publish, Server Sync and
Browse, you have the right tool for any server-based workflow. The new
Vroom engine is super-fast.
A Workspace That Fits Into Your Workflow — The innovative Workspace
gives you the flexibility of Tabs while integrating smoothly with your
Project files.
Fantastic Find — Needle and haystack, meet Espresso. Project-wide Find
and Replace, Quick Filter and colorized regex make searching through
files or text a breeze.
Language Support — Improved HTML5, CSS3, JavaScript and PHP; all-new
Ruby, Python, Apache and Markdown. Or extend Espresso with XML/JS
Sugars.
You could read a review from Mac Appstorm to have an idea of the quality. They give it 10/10.
I was looking for an online tool and that's probably why I failed to find anything.
I was pointed to the Coda plugin PHP & Toolkit that does it.
Also most HTML editors like Taco do it natively (but not Coda).
Aptana Studio 2 does what you want in the menu Edit > Format. I've used it and it formats html, css and javascript.
The WYSIWYG editor BlueGriffon also can also format html when you open a file.
Both solutions are free and open-source, but Aptana might be better. I'm not sure if BG keeps all the code unchanged, probably not.
Notes:
Aptana 2 needs to be properly configured after you install it, but
it's a great html5/css/javascript editor/IDE. The default config sucks a little.
Aptana 3 might not do what you want. The version I've tried didn't
do it.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.