HOWTO: Add Syntax Highlighting Code on Blogger using Google Code Prettify

I am going to start a series of posts where I am bound to publish lots of code (and hopefully some comments). In order to make the posts more palatable I will add syntax highlighting to the posts.

What better way to start this series than with a Syntax Highlight using Google Code Prettify on
  1. Go to your control panel
  2. Choose your blog and go to the  Layout / Edit HTML menu as shown in the screenshot below.
  3. In the Edit Template section, locate the following code:
  4. Add the following snippet after the last tag </b:skin> and before the </head> tag. This will ensure that the latest version of the Google Code Prettify  JavaScript and Stylesheets are loaded:

    <link href='' rel='stylesheet' type='text/css'/>
    <script src='' type='text/javascript'/>
  5. Locate the <body> tag and replace it with <body onload="prettyPrint()">
  6. Save your changes by pressing the 'Save Template' button then
  7. Start a new post, or edit an existing post, and in any section containing code, switch to the EDIT HTML view and surround your code with the following code:

    <code class="prettyprint">
    ... code goes there ...

  8. If you have any issues saving your post, click on the Post Options link and make sure the Compose Settings are set to Show HTML literally as shown below:
  9. Save your post and preview it, you should have something along those lines :

    @synthesize window;
    @synthesize tabBarController;

    - (void)applicationDidFinishLaunching:(UIApplication *)application {

    // Add the tab bar controller's current view as a subview of the window
    [window addSubview:tabBarController.view];

You can find more info on the Google Code Prettify website and until next time...

Happy Blogging!

No comments:

Post a Comment

Please leave your comments in English or French and I will be pleased to answer them if you have any questions.

Spammers will be walked down the plank matey. Arrr!