Coloring code in Flare with Prettify

Recently I worked on some API documentation with dozens of examples of code snippets. Anyone who reads code will tell you that color coding (syntax highlighting) makes code much easier to read.

Since I was writing the API documentation in Madcap Flare, I needed a tool that I could use in that environment. Initially I tried the Syntax Highlighter, but I couldn’t get it to work for me. So I did another search, and discovered Prettify, a syntax highlighter by Google, and that worked like a charm.

To use Prettify with Madcap Flare:

  1. Download the Prettify tar file and unzip it (I used Winzip).
  2. Copy the files from the distrib/google-code-prettify folder.

  1. In your Flare project, paste the files into the Resources folder (I created a Prettify subfolder under Resources).

  1. In Flare, open the topic containing the code snippet in the Internal Text Editor.
  2. In the <head> element, add links to the javascript file and the css stylesheet (A)
  3. In the <body> tag, add the onload instruction (B).
  4. Add <pre> tags around your code snippet, specifying the prettyprint class (C).

Here’s what the Javascript code snippet looks like in Webhelp and HTML Help output:

NOTE: This doesn’t work for PDF output.

Update September 12, 2012: Check out the MadBlog for instructions on how to use Prettify across all the topics in your project.

 

If you liked this post, consider subscribing to my RSS feed. Or have posts delivered via email. Thanks for visiting!

 

Related Posts Plugin for WordPress, Blogger...
Share
  1. Roger says:

    Great info, Jenny. Thanks. This is something that I could use.

  2. Stephen says:

    Prettify does look promising, but there’s a snag. When Flare generates webhelp, it removes onload=”prettyPrint()” from the BODY tag. I’m curious if you encountered that too.

    • Jenny says:

      Hi Stephen

      You’re right – it does remove it from the “body” tag. I regenerated my Webhelp and took another look at the code. It seems to have generated another “script” element with the onload call inside the “head”. But it does work. Have you tried it?

      I’ll run another test and see if we can simply add it to the “head” instead. Thanks for pointing that out!

      Note: I’ve used quotation marks in place of angle brackets, because WordPress strips those out.

      Jenny

      • Stephen says:

        Another option for users who can’t put onload in either the BODY or HEAD: Add a 1px transparent image somewhere one the page and include the onload element in that.

        Example:

  3. Daniel says:

    Results in your example look great, wish it would work for me as well! 🙂
    Any idea if this works for Flare 8?

  1. […] blocks in your documentation with syntax that you want to color or emphasize, you want to see this blog post by Jenny Watson. In the post, Jenny Watson outlines a method of coloring code for API documentation with Prettify, […]

  2. […] Syntax Highlighting using Prettify (a syntax highlighter by Google) Posted on August 14, 2012 by MadCap Simon var addthis_product = 'wpp-263'; var addthis_config = {"data_track_clickback":true,"data_track_addressbar":false};if (typeof(addthis_share) == "undefined"){ addthis_share = [];}Reading code that is formatted and color coded looks better and is easier to read. Jenny Watson wrote a blog post a while back on the topic, which you can find here: Coloring code in Flare with Prettify. […]

  3. […] Update: For integrating Code Prettify with Flare, see this post from Jenny Watson. […]

Leave a Reply


%d bloggers like this: