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.

We have taken what Jenny wrote and expanded on it a bit to give you a step-by-step process to get this to work in any topic with code samples in your project. Thanks for giving us a head start on this one, Jenny.

Note: This only works in HTML5, WebHelp, WebHelp Mobile, CHM, and DotNet outputs. Also be very careful with the typed code as the script is very case sensitive.

  1. Download the Prettify tar file from Google and unzip it (Winzip or WinRAR should work).
  2. Copy the files from the distrib/google-code-prettify folder.
  3. In your Flare project, paste the files into the Resources folder (in this example we created a prettify subfolder under Resources).
  4. Create a 1×1 transparent .png named onLoad.png and copy it to the prettify folder. If you don’t want to create one, download this one, unzip it and copy it the prettify folder that you created in step #3.
  5. Open the Styelsheet that you are using in your project and either copy the contents of the prettify.css into it or link to it. To link to it:
    1. Open the stylesheet that you are using in your project in the text editor
    2. Add “@import url(“../prettify/prettify.css”);” before the first style.
    3. Save All
  6. If you you are using a Master Page in your project for your outputs open it in your editor, if not create one and add it to your ‘online’ targets that you want Prettify to work with.
    1. Create a Master Page
      • Go to the Project ribbon
      • Click the “New” button
      • Select Master Page as the File Type
      • Name it “prettify” and click Add
    2. Open the Target that you want to use
    3. Go to the Advanced Tab
    4. Select the Master Page that you want to use or the one that you just created (in this example select “prettify“)
  7. In the Master Page editor, add the onLoad.png that was created or downloaded earlier.  We would suggest adding it to the very bottom of the Master Page so that it doesn’t affect an content and Save it.
  8. Open the Master Page in the text editor and add:
    1. A reference to the prettify.js in the prettify folder
    2. “onload=”prettyPrint()” to the image.
    3. Save All
  9. Open the topic that you want the code to be in and type it in.
  10. Save All
  11. Open the topic in the text editor and wrap the code in a styled <pre> tag: <pre class=”prettyprint”>
  12. Save All
  13. Since the “code” is wrapped in a pre tag you can now insert spaces to indent the lines of code. This can be done in the text editor or in the regular topic editor.

You should now be able to generate your online outputs and see the code samples formatted and in color.

If you want to see the sample project that we put together for this, download it, unzip it and open it in Flare V8 (it is a Flare V8 Project so it cannot be opened in older versions).

More information about Prettify and supported settings can be found here: http://code.google.com/p/google-code-prettify/

About The Author

Jose Sermeno

About Jose Sermeno

With over 10 years of experience in the software industry, Mr. Sermeno brings a wealth of knowledge and expertise to the product evangelist team, helping introduce new users to everything MadCap Software. In his spare time, Jose is the Project Director for San Diego City Robotics, the San Diego community college systems robotics program, and enjoys working in software design and open source hardware development. Prior to joining MadCap in late 2010, Jose ran a Drupal development shop, and was an application manager for Temple University Health System.

Last Modified: October 29, 2014

This entry was posted in HTML5, MadCap Flare, Tech Comm, Tips & Tricks and tagged , , . Bookmark the permalink.

Comments

  • Sue Andrews August 14, 2012 at 5:11 PM

    Hi – Thanks to Jenny and Madcap for this article. We have used another solution but it is good to know we have an alternative.
    PLEASE could someone find a way to include syntax highlighting in a PDF output? We publish many of our developer docs as PDFs. We want to be able to cut and paste from the PDF and use the code – but to still have it display in colors. I am not sure if this is feasible, but it would be great if it could.
    Sue

  • Daniel August 14, 2012 at 11:26 PM

    Thanks! Works like a charm!

  • Allen October 5, 2012 at 4:00 PM

    How do you put a mixture of source from different languages in the same topic?

    • MadCap Simon October 8, 2012 at 12:32 PM

      Make sure that you just include it in a pre and style it the same way as the example (class=”prettyprint”). Check out the sample project included in the post, copy the pre from each of the sample topics and paste them into the same topics. If you compile at this point you can see that they all are color coded.

  • Naz March 4, 2013 at 7:34 AM

    Hi,

    I followed the exact steps to apply the prettify js, but I can’t get the code colored. It is placed in a rectangle, formatted correctly, but not colored… any ideas?

    • MadCap Simon March 19, 2013 at 8:37 AM

      The code will not be in color in the editor, only in the generated output (not print). Try the sample project and see if that works for you. If it does, then there probably is a case issue in your code. The script is VERY pick about case. We had the same issue when we were messing with it and found that we capitalized something when it was supposed to be lowercase.

  • techwriterkai August 5, 2013 at 12:41 AM

    Thanks, Simon & Jenny, this works well, but I’ve been wondering if there isn’t a simpler way? (Trying to talk remote tech writers who don’t code through this can be quite daunting…)

    Do you think Highlight.js (http://softwaremaniacs.org/soft/highlight/en/description/) would also work?

    Cheers, Kai.

  • Dave Lee April 28, 2014 at 3:10 AM

    The instructions are out-of-date for the current version of prettify.
    You no longer need the transparent image, or the link to the CSS file; and can use a different javascript file that runs automatically.

    All you need is a single script link in the master page, e.g.:

  • Dave Lee April 28, 2014 at 3:12 AM

    The script example was removed from the previous post.

    You need to link to the script ‘run_prettify.js’ – instead of ‘prettify.js’.

Have Something to Say?

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