When you set out to grab a syntax highlighter for your website, or your favorite IDE, you quickly find there are a lot of options available. Picking which one to use can be a daunting task.
The collection of highlighters we’ll be looking at support a wide array of languages between them, however, given we’re a web design community, our demos show how the highlighters handle languages we see commonly used by web designers:
All of the demos show how each of these languages look under the highlighter in question, regardless of whether it has support specific to that language. If no language specific highlighter is available the demo will fall back to the nearest possible equivalent or to plain text.
As well as the demos you’ll get an at-a-glance screenshot of each highlighter, a succinct version of what’s involved in deploying it, a summary of its key points, extra information where relevant, and links to its list of supported languages, website and GitHub repository.
SyntaxHighlighter has been around since 2004 and is very well trusted. Its 23 supported languages are more programming than web design oriented, so this may be a good fit for a site on programming, but less so for a site concerning web design. It comes with seven themes to choose from.
preelement, using the class name to specify the language:
<pre class="brush: js"> // code here </pre>
One great advantage of using Prism is that it allows you to download a custom build, including only what you need. It also has strong support for the web design languages used in our demos, as well as support for many other languages. For a web design related site this is a strong contender, however its large number of supported languages mean it will also work equally well on a site concerning other types of coding. It has six themes to choose from.
After selecting the theme and languages you want, download your JS and CSS files at the bottom of the download page.
If you decide you want to use a different theme, just make a new theme selection from the top of the page and download the regenerated stylesheet.
preelement, and then in a
codeelement inside it, using the class of the
codeelement to specify language:
Highlight.js has the largest number of supported languages and themes, by a pretty significant margin, and a great process for downloading a custom build with just the languages you need. Automatic language detection is another very strong feature. With such a massive selection of languages and themes it seems this highlighter would be a fit for just about any use case.
Highlight.js includes a huge number of styles (themes), with all 54 bundled in the download, and some of them matching popular IDE themes like Monokai and Railscasts. Given the number of CSS files included you may wish to copy just the themes you’ll be using into your project.
The list of languages supported is also massive; I counted 118 available at present, with all our demo web design languages included.
preelement, and then in a
codeelement inside it. Language detection is automatic, however if you need to you can use the class of the
codeelement to specify language:
Rainbow is a small syntax highlighter designed to be extensible and themeable, so it may be a great choice for those looking to do customizations. Its use of
data-language to specify language instead of a class may be preferential in certain circumstances. It has 14 themes available, with some matching popular IDE themes like Monokai, Solarized and Tomorrow Night.
Rainbow provides a solid selection of core languages, and you can decide which ones you want to use when downloading.
preelement, and then in a
codeelement inside it. Use the attribute
data-languageon the code element to specify language:
SHJS is, like SyntaxHighlighter, a package focused on programming languages more than web design languages. It supports 39 languages and has 39 available themes for use.
onloadon the opening
bodytag, or using jQuery to detect when the document is ready.
preelement. Use the class on the
preelement to specify language:
Code Prettify supports 29 languages, once again with strong bias toward programming languages and less support for web design languages. The single URL autoloader allows you to avoid downloading any JS or CSS files and load everything via CDN, which is certainly a quick and easy approach. Being able to skip specifying languages, instead just applying the class
pre elements, can also be a time saver.
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.jsvia a script tag, which autoloads the syntax highlighter and default theme.
preelement with the class
<pre class="prettyprint"> // code here </pre>
Please note, there are some syntax highlighter plugins in the WP repository that are quite popular, but nonetheless will not be covered in this article. The reason for this is a recent WP issue which required many plugins to be updated to ensure security. At the time of this writing, all the plugins listed below are actively maintained and compatible with the latest version of WordPress.
TIP: With WordPress syntax highlighting plugins, sometimes the active theme can interfere with the intended appearance of code. If a block of highlighted code doesn’t look quite right, try a quick theme switch to see if that might be the problem. You may have to add a little custom CSS to your theme to overcome any conflicts that arise.
Once the plugin is installed and activated it is deployed in a post by using wrapper shortcodes around the code you wish to have highlighted. For example:
<header> <h1>Example HTML</h1> </header> <main class="style"> <p>Some text</p> </main>
When you start creating a new post decide up front whether you’ll be using “Visual” mode or not. If you will be using “Visual” mode at all, be sure to paste / type the code you’ll be highlighting in “Visual” mode and not in “Text” mode. Entering your code in “Visual” mode will escape it, converting things like
> signs to html entities like
If you are going to be working in “Visual” mode, it’s also a good idea to add your opening and closing shortcodes in first, then add your code in between them. This helps to ensure your code doesn’t get mangled during save.
Crayon Syntax Highlighter is a PHP powered solution. Whilst it is designed primarily for use as a WordPress plugin it also describes itself as being suitable for any PHP based platform.
Using Crayon in your posts is quite intuitive as it adds a button to your post editing toolbar which brings up a window dedicated to creating highlighted code. You are provided with a space to paste in your code, a dropdown list to select the language used, and several other options controlling many different aspects of code display.
One of the options provided is a selection of different themes to use per code block, meaning you can use multiple themes per page.
It has a very long list of supported languages, with a total of 63 at present including many commonly used in web design. To see the list of languages you’ll need to install the plugin on a WordPress site and take a look at its settings page in the admin area.
This plugin uses neither wrapper shortcodes nor an Add Code window. Rather, for each block of code you wish to display you create a new appropriately named custom field, e.g.
js_code_example, and add your code into it. The purpose of this approach is ensuring your code doesn’t get interfered with by the WP post editor.
To display the code from your custom field, you’ll use a short code specifying the name of the custom field and the language to be highlighted e.g.
In this section we’ll be looking at three popular IDEs: Sublime Text, Brackets and Atom. We won’t be covering the in-built syntax highlighting from any of these three, which in many cases you’ll find sufficient by default.
Rather, we’ll be going through the extensions and packages available for expanding on syntax highlighting with each. In this way, should you find the default highlighting in any of these IDEs doesn’t meet your needs, you’ll be able to jump straight into this list and find the right extension or package for you.
Note: Wherever there are multiple solid options for highlighting a particular language, we’ve included some brief info to help decide which will suit you best. However if you see no extra information on a package, you can assume that’s because we’ve already vetted the available selection and nominated the stand out choice.
It’s time to cover some Sublime Text packages which will improve the syntax highlighting for your preferred languages. We’ll cover a number of examples, beginning with Markdown Highlighting.
Note: all the following screenshots use the Spacegrey theme.
This package is the one I personally use in Sublime Text as it maintains consistency in appearance with the rest of the coding environment.
MarkdownLight turns the coloring of your document white, but does not modify the display of any of your markdown code beyond coloring and italicizing.
MarkdownEditing is quite different from the other two packages. It centers the code on the page and does things like converting
> block markers into a thick left side border. This package has your IDE looking like a post editor, making it a good fit if you’re looking use Sublime Text as a content writing tool.
Now time for some Handlebars. This package also works in Atom Editor, so if you use Atom as well as Sublime Text you can have some familiarity across both.
Jade’s turn for some highlighting improvement (as you know, I’m a bit of a Jade fan).
This package improves syntax highlighting for some of the more recent additions to CSS. It replaces the former CSS3_Syntax package for Sublime Text 2.
This package provides highlighting for both Sass and SCSS, as well as Zen Coding completion shortcuts.
The difference between the “Sass” package above and this package is not obvious from a screenshot, as the more significant variance is in how each one handles autocompletion. If you spend a lot of time writing Sass I recommend giving each of these packages a thorough run to see which one best suits your workflow.
Brackets has many, many syntax highlighting extensions, however at this point in time they are mostly for programming languages rather than web design languages.
That said, this is largely because the IDE already has in-built support for highlighting many languages, including those you’re likely to use as part of web design. A few exceptions are Handlebars, Jade, CoffeeScript and Stylus. For the first three, syntax highlighting extensions are presented below. Unfortunately, no strong syntax highlighting extension for Stylus could be found at this time.
The following screenshots are all using the default Brackets theme–and we’ll begin again with Handlebars.
The difference in Handlebars highlighting before and after installing this extension doesn’t jump out at you, as it’s somewhat drowned out in amongst the HTML tags. However, if you directly compare the Handlebars specific code, you’ll see the coloring changes therein.
This is the official Jade highlighting plugin for Brackets, maintained by the person who maintains Jade, so you can be sure it’s kept up to speed!
Atom has probably the strongest default syntax highlighting of all the three IDEs we’ve covered here today. For most of the languages you use for web design, you won’t need anything but the in-built highlighting. However, for Jade and Stylus, here are a couple of recommendations.
In the case of IDE extensions and packages, all the options presented above are solid and widely used so you can’t go too far wrong.
If you weren’t sure which way to go with syntax highlighting for your website or IDE before, hopefully the path forward will now be a lot clearer for you!