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.
Today, we’re making the process of choosing easier for you with a round up of all the most prominent offerings in the areas of straight JavaScript powered syntax highlighters, WordPress plugins, and IDE extensions & packages for Sublime Text, Brackets and Atom.
JavaScript Powered Highlighters
A big part of choosing a JavaScript powered syntax highlighter is seeing how it colors and styles the languages you want to work with. To help with that part of the equation we’ve setup a live demo for each of the highlighters we’ll be going through in this article. For every highlighter, there are three example themes showcased. You can check out the entire demo on Github.
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:
- HTML
- JavaScript
- CSS
- PHP
- Markdown
- CoffeeScript
- Handlebars
- Jade
- LESS
- Sass
- Stylus
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.
1. SyntaxHighlighter
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.
Deployment Method
- Load a core JavaScript file, then an additional JavaScript file for each language you want to highlight.
- Load a core CSS file, then an additional CSS file for the theme you wish to use.
- At the bottom of your page run the JavaScript function
SyntaxHighlighter.all() - Enclose code blocks in a
preelement, using the class name to specify the language:
1 |
<pre class="brush: js"> |
2 |
// code here |
3 |
</pre>
|
Links
2. Prism
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.
Customized Download System
Prism has support for 61 languages, including all the web design languages we’re using in our demos. When you download Prism, however, you don’t have to bring in all these languages; you can choose only the ones you need. You can also choose the theme you want to use, then the required JavaScript and CSS will be generated for you.
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.
Deployment Method
- Load the JavaScript file and CSS file from your customized build.
- Wrap each code block in a
preelement, and then in acodeelement inside it, using the class of thecodeelement to specify language:
1 |
<pre>
|
2 |
<code class="language-javascript"> |
3 |
// code here |
4 |
</code>
|
5 |
</pre>
|
Links
3. Highlight.js
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.
When you download Highlight.js you can pick and choose which of these languages you want to use and they’ll be packed into a single JavaScript file for you.
Deployment Method
- Load the Javascript file you downloaded, and the CSS file for your chosen theme.
- At the bottom of your page run the JavaScript function
hljs.initHighlightingOnLoad(); - Wrap each code block in a
preelement, and then in acodeelement inside it. Language detection is automatic, however if you need to you can use the class of thecodeelement to specify language:
1 |
<pre>
|
2 |
<code>
|
3 |
// code here |
4 |
</code>
|
5 |
</pre>
|
6 |
|
7 |
OR... |
8 |
|
9 |
<pre>
|
10 |
<code class="language-javascript"> |
11 |
// code here |
12 |
</code>
|
13 |
</pre>
|
Links
4. Rainbow
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.
Deployment Method
- Load the main Rainbow JavaScript file, and the CSS file for your chosen theme.
- Load an additional JavaScript file for each language you want to highlight
- Wrap each code block in a
preelement, and then in acodeelement inside it. Use the attributedata-languageon the code element to specify language:
1 |
<pre>
|
2 |
<code data-language="javascript"> |
3 |
// code here |
4 |
</code>
|
5 |
</pre>
|
Links
5. SHJS
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.
Deployment Method
- Load the main SHJS JavaScript file, and the CSS file for your chosen theme.
- Load an additional JavaScript file for each language you want to highlight
- Run the function
sh_highlightDocument();either usingonloadon the openingbodytag, or using jQuery to detect when the document is ready. - Wrap each code block in a
preelement. Use the class on thepreelement to specify language:
1 |
<pre class="sh_javascript"> |
2 |
// code here |
3 |
</pre>
|
Links
6. Google Code Prettify
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 prettyprint to pre elements, can also be a time saver.
Deployment Method
- Load a single URL
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.jsvia a script tag, which autoloads the syntax highlighter and default theme. - If you want to use a non-default theme, append its name to the autoloader URL like so:
run_prettify.js?skin=sunburst - Language detection is automatic, but to designate a code block to highlight, wrap it in a
preelement with the classprettyprint:
1 |
<pre class="prettyprint"> |
2 |
// code here |
3 |
</pre>
|
Links
WordPress Plugins
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.
7. SyntaxHighlighter Evolved
SyntaxHighlighter Evolved is an implementation of SyntaxHighlighter, the JavaScript based highlighter we looked at above.
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:
1 |
[code language="html"] |
2 |
<header>
|
3 |
<h1>Example HTML</h1> |
4 |
</header>
|
5 |
<main class="style"> |
6 |
<p>Some text</p> |
7 |
</main>
|
8 |
[/code] |
Usage Tips
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 < and > signs to html entities like < and >.
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.
Links
8. Crayon Syntax Highlighter
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.
Links
9. Prism Syntax Highlighter for WordPress
Prism Syntax Highlighter for WordPress is an implementation of the Prism JavaScript highlighter we covered earlier.
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.
1 |
[prism field=js_code_example language=javascript] |
Links
IDE Extensions and Packages
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.
Sublime Text Packages
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.
10. Markdown Extended
This package is the one I personally use in Sublime Text as it maintains consistency in appearance with the rest of the coding environment.
Links
11. MarkdownLight
MarkdownLight turns the coloring of your document white, but does not modify the display of any of your markdown code beyond coloring and italicizing.
Links
12. MarkdownEditing
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.
Links
13. Handlebars
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.
Links:
14. Jade
Jade’s turn for some highlighting improvement (as you know, I’m a bit of a Jade fan).
Links
15. CSS3
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.
Links
16. Stylus
Links
17. Sass
This package provides highlighting for both Sass and SCSS, as well as Zen Coding completion shortcuts.
Links
18. Syntax Highlighting for Sass
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.
Links
19. LESS
Links
20. Better CoffeeScript
Links
Brackets Extensions
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.
21. brackets-handlebars-templates
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.
Links
22. jade-brackets
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!
Links
23. Brackets CoffeeScript
Links
Atom Packages
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.
24. language-jade
Links
25. Stylus
Links
Wrapping Up
For JavaScript highlighters and WordPress plugins, arguably the best approach is to start by checking out the list of supported languages. After shortlisting the highlighters that support the languages you need to display, compare the other features in order to make your decision.
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!
