Part 3: How to highlight code with SHJS in MadCap Flare

Download SHJS. Read the usage documentation.

Extract the contents of to a folder, and copy the requisite script, language and stylesheet into your MasterPages as shown. We’ll simply embed the necessary scripting calls into the footer of an existing MasterPage so that it into every single topic. Let’s walk you through the process.

Modify MasterPage. This is what the master page will look like.

Create Stylesheet link. Now we create a stylesheet link from your master stylesheet to the syntax highlighting stylesheet with MadCap Flare’s Stylesheet Editor.

Create some code for highlighting. Embed the code you want highlighted into a pre tag and convert it into a snippet in MadCap Flare for easy reuse. You should have something that looks like the following.

Build it. Finally, embed the snippet into a topic, and build it into a HTML Help target in MadCap Flare. Once the syntax highlighting is in CHM, the syntax highlighting should appear. Set your primary target to the HTML Help target, so that when you preview the topic, it’ll work as well. If you set the primary target to WebHelp, you’ll get a JavaScript error message, since Flare will convert the onload function (embedded in the body tag) and place it in between the HEAD tag for WebHelp.

Note: SHJS doesn’t work with WebHelp, only CHM help. SHJS relies on embedding a function call into the body tag, which, in a WebHelp target is converted and removed on building the output.

---

Possibly related posts: (automatically generated)

• Insert a code snippet with a tag into a topic
• List of references and useful books for Flare beginners and professionals
• Part 1: Highlighting code snippets in topics