Development Blog

June 03, 2013
Two quick steps to install Google Code Prettify.

CSS

Display color coded code snippets on a web page.

RESOURCES:
http://code.google.com/p/google-code-prettify/
http://google-code-prettify.googlecode.com/svn/trunk/styles/

Add the JavaScript and CSS files to the header area.

<script src="/code/prettify/run_prettify.js"></script>

<link href="/code/prettify/prettify.css" type="text/css" rel="stylesheet" />

Add class(es) to the PRE tag and then convert all the greater/less than signs for the code snippet.


<pre class="prettyprint linenums">
&lt;?php

$pagepath = $_SERVER["PHP_SELF"];
$page = substr($pagepath, strrpos($pagepath, '/') + 1);
		
if ($page == "results.php"){

?&gt;

&lt;script type="text/javascript"&gt;

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12345678-9']);
  _gaq.push(['_trackPageview']);

&lt;/script&gt;

</pre>

Add this CSS wrap text method so that long single lines of code don't run across the page.

/* wrap text */
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}