Get a JavaScript Source Code Syntax Highlighter Working in Concrete5

August 21st at 12:00am

For the last 2 years I've tried various methods of displaying source code in my articles, none of which have worked very well. As I do this a lot, I recently decided that it was time to implement one of the various syntax highlighters that are 'out there'.

This article describes how I got google-code-prettify to work with Concrete5.

References

Selection

My selection criteria were pretty simple. Any Syntax Highlighter that I use must:

  • Be able to work with many different langauges (C, C++, C#, JavaScript, Java, HTML, etc...)
  • Have the ability to run locally off my severs (no 3rd party web services)
  • Work with Concrete5

After doing a few google queries I decided to pick from SyntaxHighlighter or Google Code Prettify. SyntaxHighlighter had a more web page and looked pretty easy to use so I tried it out. Unfortunately, I just couldn't get it to work at all, even using a stripped down bare-bones HTML container with just the JS that it needed to operate. It had some issues on lines 759 and 760 of the shCore.js file.

Given that SyntaxHighlighter just didn't work, I moved over to Google Code Prettify and found that it worked with a minimum of fuss.

 

What's in the box?

After downloading the latest Google Code Prettify archive, I decompressed it with 7-zip and examined the files. Be sure to download the prettify-small-* package if you just want the files you need to get it running.

In the package there are a few files:

  • Lots of lang-*.js files which contain the prettifiers for the specific languages
  • prettify.css which is the default style sheet used by the prettifier
  • run_prettify.js which bootstraps the whole package

Not included in the downloaded package are the additional themes you can use. I like the sunburst theme better than the default one.

 

Deploying Google Code Prettify

To get the prettifier working on your site is a 3-step process:

  1. Create a directory on your web server where you can store all the .js and .css files you downloaded. Ensure the permissions are set so that a web browser can access the files.

  2. Create a pre tag that looks like this: < pre class="prettyprint linenums"> ... code ... < /pre> and place the source code you want to share inside of it. Note the classes that are assigned to the tag: prettyprint and linenums. These 2 classes will help format the code and add line numbers.

  3. Include a script tag which kicks off the run_prettify.js script. It would look something like this:
    < script type="text/javascript" src="../path/to/prettify_directory/run_prettify.js?skin=sunburst">< /script>

Note: You can pick which theme you want to run by appending ?skin=<themename> to the src attribute
Note 2: You can customize the themes by editing their css files. I wanted to allow for side-scrolling and showing all line numbers. Both were easy edits.

When you refresh your page you should see that the pre tag you setup in step 2 has transformed into something much more prettified. :)

 

Notes for Local Deployment (no google CDN)

If you want to deploy google-code-prettifier on your site without any calls made outside of your domain you need to make a few changes to the run_prettify.js script:

  • Open run_prettify.js in notepad++ (or your preferred editor)
  • Find all references to google-code-prettify.googlecode.com
  • Replace the references to point to your website url

You will see one url in the js that references /svn/loader/skins. If you want to run a non-default theme/skin, you will need to have a directory on your webserver that houses the alternative css files. I broke out the skins into their own separate directory as that appears to be what the script expects

 

Notes for Concrete5 Deployment

Getting this to work with Concrete5 was pretty simple. I just created a stack which contains the script to load the prettifier. My workflow looks something like this:

  • Anywhere I want to place a code fragment, I create a new html block
  • In the html block, I create a pre tag with the classes specified in the deployment section above
  • After all html blocks have been created I add the stack that I had  previously created
  • Refresh the page to make sure the code looks good

Note: If you go the route of a 'stack' be sure to Click on the Version History button on the stack page and Approve the version you want to go live. I had a problem where the stack would NOT show up until I approved a version.

Example

Here is a comparison between what your code looks like before prettification and afterwards:

 

Without prettification:

void Cryptography::Test(){
    uint8_t Key[32];
    uint8_t IV[AES_BLOCK_SIZE];
    RAND_bytes(Key, sizeof(Key));
    RAND_bytes(IV, sizeof(IV));

    DoStuff(key, IV);
}

 

You can prettify the code by using a pre-tag that looks like this:

<pre class="prettypring linenums">
void Cryptography::Test(){
    uint8_t Key[32];
    uint8_t IV[AES_BLOCK_SIZE];
    RAND_bytes(Key, sizeof(Key));
    RAND_bytes(IV, sizeof(IV));

    DoStuff(key, IV);
}
</pre>

 Using the pre tag and corresponding classes you can get the code into a much more readable state:

Note: This site is no longer powered by concrete5. The syntax highlighting on all pages is powered by a static site generator (Jekyll) 

void Cryptography::Test(){
    uint8_t Key[32];
    uint8_t IV[AES_BLOCK_SIZE];
    RAND_bytes(Key, sizeof(Key));
    RAND_bytes(IV, sizeof(IV));

    DoStuff(key, IV);
}