How To Add Syntax Highlighting To Google Chrome

This one's for the programmers, scripters and tinkerers: Chrome extensions Syntaxtic! and Code Highlight add syntax highlighting for viewing code in your browser.

The first, Syntaxtic!, performs code highlighting on text-files opened in the browser — files with extensions like .js, .css, .rb, .py — the list of supported programming languages is pretty long and comprehensive. After installing, view a page like this one to see it in action.

The second, Code Highlight, detects when any page is using pre and then code tags on a page (common for displaying code), and automatically adds syntax highlighting to that code. Unfortunately this one seems to have a little more trouble identifying code on all pages. Below, for example, I've pasted text that should work, but after installing the extension and reloading the page, I'm not seeing results — so your mileage will vary on this one.

function this_code_could_be_prettier() { alert("Sorry we don't have nicer formatting for our code."); }

These extensions aren't for everybody — in fact, they're really only useful for programmers or people who like to tinker with code. If you'd like to join those ranks, check out our programming 101 guide, or our more comprehensive beginner's guide to coding.

Syntaxtic! [Chrome Extensions] Code Highlight [Chrome Extensions]


Be the first to comment on this story!