Syntax Highlighting / Prettify

Are you looking for or having trouble setting up a syntax highlighter like we have running here?

We're using Prettify - Google's syntax highlighter. The same one is used on stackoverflow.

You can get it for free from Google here by following the Download links.

How it works

The highlighter works by loading the script which looks for anything inside <pre class="prettyprint">

tags that have the class of prettyprint. When it finds this, it executes the highlighter and breaks the tags up and adds classes to them so they can be styled by CSS.

Setting it up

The script

There are a couple of ways to do this - remotely or locally.

To call the script remotely, simply add this URL to your template: https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js

There are a few ways you can call this file in - depending on how your template is set up, you can use:

Remotely

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

$this['asset']->addFile('js', 'https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js');

Locally

<script src="/[scriptfolder]/prettify.js"></script>

$this['asset']->addFile('js', 'js:prettify.js');

The CSS

Copy the CSS into one of your files - or create a new one and call it in like we did above. If locally, change js with css

/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */
@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}
/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}
/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 2px; border: none; padding: 0 15px 15px; }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

Calling the function

Now that we've got everything set up - we need to call the function, otherwise nothing will happen!

To do this, we add this function to any of the pages you want it to be loaded on. For this website, we have included it in the main template so any time it finds <pre class="prettyprint">, it activates and runs the script.

Add this right before your closing body tag.

<script>prettyPrint();</script>

Using it

To use this, you must ensure that any code that needs to be highlighted is wrapped in <pre class="prettyprint">.

You must also change all < to < and > to > otherwise it will be outputted with the tags and your CSS will still apply to them.

Had enough browsing?

Get in touch