---
title: "Adding Syntax Highlighting to Code Examples Online and in Microsoft Word"
date: 2013-04-04
description: "$( document ).ready(function() { // Handler for .ready() called. $('#toc').toc({ minimumHeaders: 3, listType: 'ul', showSpeed: 0, headers: '#content h2, #content h3, #content h4, #content h5, #content h6' }); /*..."
canonical_url: https://idratherbewriting.com/2013/04/04/adding-syntax-highlighting-to-code-examples-online-and-in-microsoft-word/index.html
---

> For AI agents: a documentation index is available at https://idratherbewriting.com/llms.txt. Markdown versions of all pages are available by appending .md to any page URL.

# Adding Syntax Highlighting to Code Examples Online and in Microsoft Word

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 [Drupal version](https://drupal.org/project/prettify) or [WordPress version](http://wordpress.org/extend/plugins/wp-code-prettify/) or [regular HTML page version](https://code.google.com/p/google-code-prettify/)). This module/plugin applies syntax highlighting to your code so that it's more readable.

[![example](https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/example-600x219.jpg)](https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/2013/04/example.jpg)

I usually replace the angle brackets with their character symbol equivalents (< and > for less than and greater than). If you leave in the angle brackets, the Prettify plugin sometimes has issues.

To get the same syntax highlighting in Microsoft Word, copy your program code into [this online form](http://www.planetb.ca/2008/11/syntax-highlight-code-in-word-documents/) 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.

You want the numbers in Word, by the way, because you're usually explaining what each of the line numbers means.

If you have a JSON response and want to keep the formatting clean, use something like [Chrome's Advanced Rest Client app](https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo?hl=en-US) to format the JSON into readable code. Then manually copy this into your web page and apply the Prettify plugin's syntax highlight.

------------

Update: For integrating Code Prettify with Flare, see this [post from Jenny Watson](http://www.jennywatson.net/2012/02/15/coloring-code-in-flare-with-prettify/).