Posts Tagged ‘Prettify’

Coloring code in Flare with Prettify

Posted in Madcap Flare, Tools on February 15th, 2012 by Jenny – 12 Comments

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!