Smashing Magazine we smash you with the information that will make your life easier. really.
Time-Savers: Code Beautifier And Formatter
July 12th, 2007 in Developer's Toolbox | 89 Comments
Well-documented and readable source code is essential for every collaborative project. Logically structured, well organized and nicely formatted, the code can speed up the bug hunting and help to keep the code clean, minimal and still functional. These aspects are particularly important if the code is being developed by a group of developers: in this context a common scheme for source code presentation is necessary. You don’t have to do everything by hand; in fact, there are many tools which can save a lot of time - for you and your co-workers.
The tools and services we’ve collected below aren’t validators. They format and beautify the code; some of them can remove redundant elements. Using them, you have to make sure you have a backup, so your data can always be restored.
Let’s take a look at code beautifier and formatter which can save you a lot of time and help to maintain a clean and readable source code.
Code Beautifier And Formatter
1. Quick Highlighter
Quick Highlighter can format source codes written in over 85 languages - among them C++, PHP, Ruby, HTML, JavaScript, Perl, Python, Smarty, XML and more. The tool formats source code and highlights inbuilt keywords, data types etc.
2. PrettyPrinter
Knows PHP, Java, C++, C, Perl, JavaScript, CSS. The service offers many formatting options you can use to present the code just the way you’d like it to look like.
3. PHP Code Beautifier
This tool is designed to beautify PHP code, applying most of the PEAR standard requirements to it. It can even process really scrambled scripts, e.g. all code in one line, and thus may help you to get scripts into a more readable form. It sets missing line breaks without removing any additional line breaks that you may use to group related things and corrects wrong indentation according to the level of nested braces.
4. Ruby Script Beautifier
Ruby Beautifier accepts a command-line list of file names, creates a backup copy of each named file and beautifies the originals. If there is an indentation error (an imbalance of opening and closing keywords), the script will print an error message but will save the result anyway.
5. Tabifier
The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and C Style code; the latter being anything that uses curly braces to start and end blocks, and semicolons to terminate statements.
6. CSS Beautifier
This tool offers a variety of options, among them - Alphabetizing Feature and De-Capitalization Feature.
7. CSS Formatierer und Optimierer
Has different compression layouts; you can sort selectors, properties, regroup selectors, optimize shorthands, compress colors, compress font-weight, discard invalid properties and add timestamps. You can also create a custom template the system will use to format the code. The result can be outputted as a file. A copy / mirror of the tool can be found on cleancss.com.
8. Highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it. Also available as Wordpress-Plugin and Firefox-extension. Suported languages: Python, Ruby, Perl, PHP, HTML, CSS, Django, JavaScript, VBScript, Delphi, Java, C++, SQL. Similar tools is offered by Google: Googles Javascript Code Prettifier.
9. Code Beautifier Plus
Beautifies Java, C# and ActionScript.
10. PHP Formatter
PHP formatter adds comments after control structures, colors the output, links to the php-manual by inline-functions, removes comments and removes empty lines. There are 5 pre-defined layouts, but you can also define your own styles.
11. PHP_Beautifier
A tool to beautify PHP 4 and PHP 5 source code - to run on your own server. Requires PHP 5.
12. Online Beautifier for JavaScript
The tool completely reformats the JavaScript source code, so that it becomes a little bit more readable.
13. Lorins simple code beautifier for C++, C#, Java, and Javascript
You can use the source code of this beautifier to creat your own code formatters.
14. Tidy
A classic. Tidy consists of many program libraries and comes and has many variations. E.g. you can use
- TidyGUI to format the code right on your desktop,
- HTML Tidy
- Clean up your Web pages with HTML TIDY
- HTML Code Export (software based upon Tidy)
- CSSTidy
- Perltidy
- HTML Validator Firefox Extension
Commercial Solutions
15. SourceFormatX Source Code Formatter & Beautifier
For developers. The tool supports neither HTML nor CSS; instead Javascript, VB, PHP, ASP, JSP, HTC, C, JAVA and more. Price: $36,99, Windows.
16. Polystyle
Polystyle automatically reformats source code in your personal style. Polystyle learns your formatting style by examining examples of your code. It is another Windows-tool which supports Actionscript, ASP, C/C++, C#, CMAC, CSS, HTML, Java, Javascript, JSP, PHP, Pascal/Delphi, Perl, Python and Visual Basic. Price: 79$, can be used from the shell and Windows Explorer.
Further Solutions
17. phpCodeBeautifier (Win/Linux Shell), HTB 2.0 (Shell).
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Binny V A (July 12th, 2007, 8:10 pm)
Make sure that you test your app after applying the modifications. There are cases when code formatters have caused errors in the code.
Also, make sure you have taken a backup before saving the formatted code.
Michael (July 12th, 2007, 8:20 pm)
Better solution: (g)Vim with syntax highlighting.
Skys0 (July 12th, 2007, 8:38 pm)
Some useful tools ! Thank you ! :)
Tom (July 12th, 2007, 9:12 pm)
Ok, those are great. Has anyone seen a class library that performs code formatting for display in ASP.NET C#?
I plan to use this on my blog to show code that I find useful.
Thanks
marianne mcdougall (July 12th, 2007, 9:22 pm)
Some very useful tools - Thank a lot guys.
Mari
G3 Creative (Scotland)
Rick (July 12th, 2007, 9:25 pm)
I just use dreamweaver. It highlights code as well as anything Ive seen.
Peter (July 12th, 2007, 9:49 pm)
I use a free piece of software (Windows only) called Link [www.html-kit.com]. It offers highlighting for just about every web language, a vast repository of plugins, and a built in FTP client (very handy for editing things on the fly).
Jeff Croft (July 12th, 2007, 10:25 pm)
I’m surprised Pygments was left off the list. For syntax highlighting, I don’t think it can be beat.
lizzardS (July 12th, 2007, 10:37 pm)
Awesome tips as usual.
Though I would recommend saving a backup copy prior to using the tools. I know that sometimes TIDY can toss my whole page into a column. But it is still a useful tool, just remember it is a tool.
Sergej (July 12th, 2007, 11:43 pm)
I use Link [compressor.ebiene.de]
Jenny (July 13th, 2007, 12:55 am)
Thanks for this very helpful posting.
I read about online backup on a daily dasis from an aggregator site,
Link [www.BackupReview.info]
I have been trying to find a source code for making a sofware for online backup service. Do you know of any such codes?
Cheers.
plasebo (July 13th, 2007, 1:01 am)
Is the javascript from google for prettifying code on webpages in this list?
Karl L. Gechlik (July 13th, 2007, 1:21 am)
I know some programers around here that can learn from this! I have forwarded it along. Thank you for the great article.
Keep up the great work from your friends @ Link [www.asktheadmin.com]
Flasher (July 13th, 2007, 1:28 am)
In regards to #9. Code Beautifier Plus….you should be shot dead at your keyboard if you use on(press), etc in actionscript.
DynamicStability (July 13th, 2007, 2:00 am)
I’ve been using AStyle for years.
Link [astyle.sourceforge.net]
Artistic Style 1.21
A Free, Fast and Small Automatic Formatter
for C, C++, C#, and Java Source Code
Is that advertising?
Brian H. (July 13th, 2007, 2:14 am)
For SQL, wangz.net provides a really nice Link [www.wangz.net]
Jestep (July 13th, 2007, 2:27 am)
Anyone know of a Dreamweaver add-on that does this?
Benson (July 13th, 2007, 2:54 am)
Notepad++ is a powerful and free editor.
Link [sourceforge.net]
Andrey (July 13th, 2007, 3:16 am)
There is one more good commercial solution: Profactor Style Manager. This tool intergrates into VisualStudio and allows adjust all styles it can apply. Nice thing, I’ve used it once.
Roberto (July 13th, 2007, 3:52 am)
There is a nice csstidy version (same as Link [www.cleancss.com]) at Link [www.codebeautifier.com] with a portuguese version and a ’select code’ feature. :)
John Robo (July 13th, 2007, 4:14 am)
As this post shows, c, c++, java, php, etc code formatters are about a dime a dozen.
What I need is a free formatter for COBOL.
That sure would make the task that I have to do SO much easier.
Does anyone know of a good FREE COBOL code formatter?
ken (July 13th, 2007, 5:09 am)
Seriously people, use Vim.
It can do twice what any of these programs can combined.
It has a steep learning curve, but so does programming; Vim is worth your time.
Michael Brennan-White (July 13th, 2007, 6:50 am)
Eclipse is awesome, cross platform and provides almost all of the functionality of Dreamweaver, and it is free.
You can use some of the wonderful plugins like CFEclipse and Aptana to provide syntax highlighting but also much more including the best tool for debugging purposes, code folding.
Bob (July 13th, 2007, 10:34 am)
And none of them work with velocity…
CFrankB (July 13th, 2007, 3:03 pm)
John Robo, the best COBOL formatter I could find is unlimited shareware; search for Cobol Beautifier.
Nibbler (July 13th, 2007, 5:03 pm)
Is it any safe to blindly submit php code in those websites? Who knows it contains sensitive information (like database connections). Pay attention for these.
@John: So you are one of the few people who program COBOL… nice. I think you can create your own style with Notepad++ (or change one of another language). But for auto formatting, I think it’s best to write something small yourself (in VB6 you’re quickly done).
Shery (July 13th, 2007, 5:05 pm)
Thanks guys, very good tools although i use Dreamweaver in my work and also use it as an auto complete, i hate the auto generators. :S
Traian (July 14th, 2007, 4:54 am)
Thanks for the info, i was searching for something like this :)
Extremely useful website
Steve (July 14th, 2007, 5:16 am)
I have coded in many environments, although the article is about code auto formatting software, I will just say that nothing compares to Visual Studio 2005 in real-time code formatting. It’s perfect.
Timothy Long (July 15th, 2007, 12:19 am)
I’m tabified.
Digital Street (July 15th, 2007, 12:44 am)
Thanks for the tools review.
I will check some of them when I can.
Josh (July 17th, 2007, 7:27 am)
Thanks guys. Great tools here. Link [www.startupbyte.com] is almost entirely built from the code/tools you guys have featured. Great work.
Petr (July 18th, 2007, 12:14 am)
You can also try Jush (http://jush.info/).
Christopher Rees (July 18th, 2007, 3:06 am)
I happen to like Scintilla, which is free and does great syntax highlighting, etc.
Link [scintilla.sourceforge.net]
jmur (July 19th, 2007, 7:46 pm)
Sois una panda gays con tanto color y tanta mierda.
Viva el VI. Y digo el VI y no el VIM.
LeoB (July 20th, 2007, 2:16 am)
Oh, I did not know you needed pretty-printers today. Don’t you know about Emacs?
To be honest, what you can get from Emacs in this area are things like:
- syntax highlighting
- easy indentation (per line or for the whole file)
- quick ways to make a html view of the code with syntax highlighting
And you get that for a lot of programming languages, from C to XHTML, on Windows, Linux etc. That can be quite a timesave.
Jestep (July 20th, 2007, 10:44 pm)
Here’s one for XHTML. I noticed that all of the examples only validated to HTML 4.0
Link [www.webmastergate.com]
Axel (July 24th, 2007, 7:20 pm)
I’m using Link [jtidy.de] to convert HTML to Wikipedia text and Java, PHP, C#, ABAP, XML, HTML and JavaScript snippets to Syntax highlighted code
Koesper (July 30th, 2007, 10:35 pm)
I’m also looking for a dreamweaver extension that adds CSStidy functionality to dreamweaver… havent found anything yet…
Someone should build this! (if only i knew how)
Koesper (August 3rd, 2007, 8:16 pm)
in regards to my own comment above… I have started building a csstidy plugin for dreamweaver myself..
when it is finished i’ll post the results to the Link [sourceforge.net]
GuidoMarcel (August 18th, 2007, 2:58 am)
There is also a free online sql formatter for SQL code. Link [www.sqlinform.com]
Matt (February 14th, 2008, 12:23 pm)
Please give my HTML Formatter a look…a lot of people have found it very handy…Drag and drop folders or files, back ups, total reformats and beautifies the code.
Link [www.logichammer.com]
Wellington Oliveira (March 27th, 2008, 9:51 am)
Polystyle do the right job!
Dreamweaver integration with polystyle can be found here:
polystyle.com
Regards!
Wellington.
sorry, wellington, but this domain is pending renewal or deletion (editor)
Tester (April 9th, 2008, 1:36 am)
I need a PHP beautifier or formatter for using in cmd or Putty for Linux .
Jade Ohlhauser (May 6th, 2008, 9:27 pm)
CSSTidy didn’t work for me so I wrote my own and you’re welcome to it if you like: Link [jadeohlhauser.com]
(Windows only, sorry Tester, but you can have the source code if you like).