How To Display Code Snippets On Your Umbraco Website

If you’re working on a website that needs to display code (like this one), then you’ll need a way to make it readable and look cool. Instead of wasting your time trying to write something yourself, it’s much easier to implement a ready-made off the shelf solution. In today’s tutorial I’m going to tell you how to achieve this using Google Code Prettify.

What Is Google Code Prettify?

Most things Google produce are awesome and this is no exception. Google Code Prettify, is a fast JavaScript/CSS framework that will sit on your website and if it detects certain tags, will make everything in between those tags look good. Another really powerful feature is that it works with multiple languages and it can be themed, so you create your own styles as needed. GCP is used by many of the web’s top sites, including StackOverflow and this one.

How To Install up Google Code Prettify With Umbraco

Installing GCP is no different than installing it on any website. First, you will need to down load it from, https://github.com/google/code-prettify.

To make GCP work you will need two files,’prettify.js’ and ‘prettify.css’. Depending on how you architect your front-end files, you’ll need to add these to your CSS and JS folders within your webroot.

In the head section of your master template, you’ll need to add this:

<link rel="stylesheet" href="http://website_url/folder_location/prettify.css" />

At the bottom of your Umbraco template you’ll need to reference the JS file, like so (this need to be above the closing body tag).

<script src="http://website_url/folder_location/prettify.js"></script>
<script>
window.onload = (function(){ prettyPrint(); });
</script>

Obviously, change the URL’s to point to the files within your website 😛 To make some code look pretty we need to wrap it within a ‘pre’ tag.

<pre class"prettyprint">
</pre>

Simply add code and wrap it using the code above and when you view it. GCP’s JS and CSS will detect the class and style it accordingly, your code should be PIMP’ed to the max, word!

As I mentioned above, GCP also has a load of themes you can install. I’d recommend taking a look at, https://jmblog.github.io/color-themes-for-google-code-prettify/ to make your website stand-out slightly from the crowd.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *