Using Prism Syntax Highlighting instead of Google Prettify

Using Prism Syntax Highlighting instead of Google Prettify

In a previous post, I discussed how to add code formatting (syntax highlighting) to your Ghost blog.

Since then, I've decided to switch to using Prism syntax highlighter. Prism uses more standards-compliant mechanisms for marking up code. Specifically, it uses a class on the code element to mark what language the code block is written in. It also allows you to pick which features you wish to use and download files specifically catered to your needs.

Unfortuantely, I already have a significant amount of code on my blog that is formatted for Google's Code Prettyfier. I decided to write some code to convert prettyfied code to Prism-formatted code. This is a temporary fix while I update my blog entries.

Here is the code I used to do the conversion:

function convertPrettyfierToPrism() {

	console.warn('there are ' + $('pre.prettyprint').length + ' prettyprint pre tags on this page');
	console.warn('there are ' + $('pre.linenums').length + ' linenums pre tags on this page');

	$('pre.prettyprint').each(function () {
		$(this).removeClass('prettyprint').children('code').each(function () {
			$(this).addClass('language-clike');
		});
	});

	$('pre.linenums').each(function () {
		$(this).removeClass('linenums').addClass('line-numbers');
	});
}

I used the c-like language since that is what most of my code is (there is CSS, VB, and PHP in my blog, but most of it is either JavaScript or C#).