2013-04-04-adding-syntax-highlighting-to-code-examples-online-and-in-microsoft-word.html

---
layout: post
title: Adding Syntax Highlighting to Code Examples Online and in Microsoft Word
date: 2013-04-04 22:11:32.000000000 -07:00
categories:
- technical-writing
tags: []
status: publish

published: true
---

{% include toc.html %}

<p>If you're integrating code examples into your technical documentation, a couple of tools can help with this. If you have an online output, you can use Code Prettify (see its <a href="http://drupal.org/project/prettify">Drupal version</a> or <a href="http://wordpress.org/extend/plugins/wp-code-prettify/">WordPress version</a> or <a href="https://code.google.com/p/google-code-prettify/">regular HTML page version</a>). This module/plugin applies syntax highlighting to your code so that it's more readable.</p>
<p><a href="{{site.media}}/2013/04/example.jpg"><img class="alignnone size-medium wp-image-16732" alt="example" src="{{site.media}}/example-600x219.jpg" width="600" height="219" /></a></p>
<p>I usually replace the angle brackets with their character symbol equivalents (&amp;lt; and &amp;gt; for less than and greater than). If you leave in the angle brackets, the Prettify plugin sometimes has issues.</p>
<p>To get the same syntax highlighting in Microsoft Word, copy your program code into <a href="http://www.planetb.ca/2008/11/syntax-highlight-code-in-word-documents/">this online form</a> to create the syntax highlight. Then paste it into Word. if you have a one-liner, add a second line to retain the number when copying and pasting, and then remove the extra line number once it's in Word.</p>
<p>You want the numbers in Word, by the way, because you're usually explaining what each of the line numbers means.</p>
<p>If you have a JSON response and want to keep the formatting clean, use something like <a href="https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo?hl=en-US">Chrome's Advanced Rest Client app</a> to format the JSON into readable code. Then manually copy this into your web page and apply the Prettify plugin's syntax highlight.</p>
<p>------------</p>
<p>Update: For integrating Code Prettify with Flare, see this <a href="http://www.jennywatson.net/2012/02/15/coloring-code-in-flare-with-prettify/">post from Jenny Watson</a>.</p>
{% include ads.html %}