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]

The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.


Leave a Reply