Simple guide explaining how to use Google Code Prettify on your website to highlight code syntax – get Google Code Prettyprint installed on your site quickly.
Syntax highlighting is one of the basic things that technology, programming and web design site owners want on their sites and blogs. Google Code Prettify is one of the popular (I must say the best) ways to setup code highlighting on your site.
Why should I use Google Code Prettify?
It’s fast, efficiently programmed and supports multiple code themes for syntax highlighting – this way it beats other free projects on the same topic.
In this article we’ll see how to get it installed on our site without messing much with the code.
Setting up Google Code Prettify on a website
Save the changes.
Note: The Code Prettify tries to detect your code type automatically, however, if you’re not getting it work for your code, specify the lang attribute as given in the list of supported languages. You can also choose a different skin from the available ones.
Now, whenever you have to show code syntax on your site or blog posts, just wrap it in parsed form between
<pre class="prettyprint"></pre> or
<code class="prettyprint"></code> tags. Did you notice that these tags carry a
class="prettyprint" attribute, that makes the Google code prettify script to target it and style it dynamically.
For a demonstration, I’m displaying some sample prettified code here with the help of Google Code Prettify. I have used the Sunburst theme for that:
Additionally, if you’re a CSS ninja, you can also create a separate style for your syntax highlighting purposes. Hope you find it useful.