Code / Syntax Highlighting

In my last post, Add Disqus to Your Anchor CMS Blog, I included some HTMLs and JavaScripts. I even mentioned some PHPs and, one day, I might add some CSSeses to a post! I’m making these language names plural to be funny. I know I’m not funny.

So what?

example highlighted code snippet

Well not only did I include these snippets of code, but I included them in a most beautiful way: with highlighting! Syntax highlighting, sometimes called code highlighting, is a really interesting and helpful way of adding code blocks to your site so that your visitors can read and use them.

Interesting

Highlighting adds interest because you can choose from a variety of themes or even make your own. These themes add color to different aspects of the code. Tags, variables, values, functions, and more are all given their own color, style, font, etc. I’ve even seen some themes that use opacity and text-shadow to add emphasis to important elements.

If you’re going to include code snippets on your site, you should consider how boring a simple black & white code block can be to read. I’d much rather make things interesting for my visitors.

Helpful

There’s a reason popular code editors like Sublime Text and Notepad++ include syntax highlighting by default. It makes the code much easier to read and understand. If a function declaration is bright pink then you can easily scan the code for bright pink text to find each function. Of course, even a subtle color or style variation will help too. But sometimes you just can’t beat bright pink!

Also consider that whenever a visitor finds a code block useful, they will most likely be copying all or a portion of it to use in their own project. The majority of problems during this process occur because an important part of the code was missed. If you copy all lines of a function but forget to grab the closing bracket, you’ll definitely get an error when you run that script. So syntax highlighting can help in reducing copy-paste mistakes.

You’ve convinced me. Now what are my options?

By default, all you need to do is wrap your inline code in a <code> tag like I did just there. If you want to include a block of code, you’ll also want to keep the whitespace intact. To do this, wrap your code in both <pre><code> tags. The pre means preformatted and it will preserve your spacing, tab, and newline characters.

Once you have your code output the way you want it, you can highlight it. I prefer client-side highlighting with JavaScript, even though it requires more to be downloaded and performed by the visitor’s device. Server-side highlighting is more complicated and certain ways of doing it modify your content, which you can’t easily undo. So let’s see some popular choices of syntax highlighting…

Google Code Prettify

https://code.google.com/p/google-code-prettify/

This option is incredible. Automatic language guessing and a huge arsenal of understood languages. If your site touches on many programming languages or at least the very obscure ones, Google Code Prettify is probably for you. It’s for anyone really, because it handles all the simple cases with ease as well.

However, it’s huge arsenal comes with a price: filesize. This option is one of the biggest out there. While many people choose to load it from Google’s CDN and therefore it may already be cached by your visitors, you’re still risking a large download.

Highlight.js

https://highlightjs.org/

Highlight.js also offers automatic language guessing but does so at a considerably smaller filesize. Don’t get me wrong, it’s still not a lightweight option but it’s more conservative than Google Code Prettify. It’s also easier to use. I’m pretty confused by Google’s project site, but the highlight.js site is super easy to use and you can easily customize your version of the code to match your needs.

Personally, I find the themes to be much more attractive than the Google option too. You may see things differently, so be sure to compare both. If you’re trying to conserve bandwidth (and you should) and you need automatic language guessing, then this is probably your best option.

Prism

http://prismjs.com/

Now this is the coolest, bestest option I’ve seen, by far! Prism offers really attractive themes, a plugin architecture, and super-lightweight code. You can write your own features and add new language support with plugins. The whole thing is so lightweight, it’s kind of unbelievable compared to the competition. The following is quoted from their homepage:

The core is 1.6KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.

That’s crazy small! Unfortunately, part of the reason for the size reduction is that there is no language guessing. So you have to specify the language when you write your code block. For many people, this is probably not an issue at all, because it’s good practice to include the code language with your code. But for me, this was a heart deal-breaker because of my CMS editor’s limitations.

Final Thoughts

So there you have it. Three super options for adding client-side syntax highlighting to your website. I ultimately went with highlight.js for this site and I’m really happy with it. The theme I picked looks really nice and I have no complaints so far. I would have loved to use Prism but for now, it’s just not possible. If Anchor CMS makes some changes to its Markdown implementation or someone writes a language guessing plugin, I will definitely revisit this decision.

I hope this article was helpful to you and that you consider adding syntax highlighting to your site if you write and share code snippets. I’m sure your visitors will appreciate it.

If you have any questions or need help with your implementation of any of these options, let me know. I’d be happy to help. Hit the comments or you can find me on Twitter: @andrewmiguelez

  • anggietp

    Can you help me? I’m using anchor too…I can’t find a way how to add new line in markdown (not a new paragraph –which I know, using 2 enters). Just one enter resulting a single line…This is happen also on code blocks. Thanks.

    • Andrew Miguelez

      Sure thing. If you check the Markdown documentation it shows that to add a simple line break you need to add two spaces before you hit return for the new line.

      As far as code blocks go, line breaks should be automatic. Code blocks interpret the whitespace characters literally.

      • anggietp

        Wow, thanks…it works now.