View HTML Source In Safari With Color Syntax HighlightingMarch 31st, 2010
The View Source command (Option-Command-U) in Safari displays HTML source code in plain text. You might get color envy when you view the nicely formatted, colored syntax highlighted HTML source using Firefox or Chrome. Here are three ways you can get colored syntax highlighting in Safari.
1. Using Web Inspector Under Developer Menu
HTML source code colored syntax highlighting is available in Safari Web Inspector under the Developer menu. This option is not enabled by default. Open Safari Preferences and select the advanced tab. Checked the tick box “Show Developer menu in menu bar” to enable the Developer menu.
You should see the addition of a “Developer” menu next to the “Window” menu. Open up Web Inspector from menu Developer->Show Web Inspector or using Option-Command-I. A new window will pop up occupied the bottom half of your Safari window, displaying the HTML source with colored syntax highlighting.
Web Inspector looks intimidating as it is meant for more than just syntax highlighting.
2. Using SafariSource Plugin
SafariSource is a Safari plugin for viewing color syntax HTML source. It adds a preference pane to Safari’s preferences for you to control the colors and stylings for the syntax highlighting.
SafariSource works through the popular SIMBL plugin framework which enable plugins for Safari to work. SIMBL Installer is included in the SafariSource download as you need to run it first before installing SafariSource plugin.
One caveat of using SafariSource under Safari in Snow Leopard is the plugin currently is only compatible with 32-bit mode of Safari. Running Safari in 32-bit mode in Snow Leopard is not recommended as you losses the crash protection and other improvement available in 64-bit Safari.
3. Using Web Services
This is not specific to Safari, but can get the job done if you do not feel like launching another browser. You can view source code with color syntax using web sites such as http://pygments.org/ or http://www.hilite.me/. It is less convenient as you need to copy the source from the clipboard and then paste the HTML codes into the web form.