Prettify: a useful javascript code highlighter

Source: Guide & Download and Getting Started


How to include and run Prettify?


Automatic (Method 1)

This method will automatically load the CSS Skin file. See below the script inclusion:

<script type="text/javascript" src="/MyPath/prettify/loader/run_prettify.js?skin=sons-of-obsidian" ></script>

Or ... if you want you can alternatively use the CDN:

<script type="text/javascript" src="" > </script>



Manual (Method 2)

In order by to load CSS Skin file, firt time include the lib script:

<script type="text/javascript" src="/MyPath/prettify/loader/prettify.js" > </script>

Or via CDN:

<script type="text/javascript" src="" > </script>


And after inclusion you have to use custom JS script, see below:

<script type="text/javascript" >

function getThemeName()
    var theme = "sons-of-obsidian"; // You can pick this value from nn attribute, or some other moethod, etc.
    return theme ? theme : 'default';

function loadTheme(theme)
    var base = "MyPath/prettify/loader";
    var defaultTheme = base +"/prettify.css";
    var setTheme     = base +"/skins/"+ theme +".css";

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = theme === 'default' ? defaultTheme : setTheme;

$( document ).ready(function() {
    PR.prettyPrint(); // Launch when "prettify.js" is loaded

(function () {        
    loadTheme( getThemeName() ); // Load the selected stylesheet




How to write code to highlight ?

In the following example you can see how to use Prettify, the wrapper to use and some other feature.

  1. prettyprint and linenums are two Prettify classes:
    1. prettyprint: used to trigger the code highlightning
    2. linenums: used to insert line numbers.
  2. CSS prettify-fix-1 is a custom class added by Quadratica, this class aligns to left and add padding to <pre> tag.


<pre class="prettyprint linenums prettify-fix-1" >

var p = {
    'tag': $itemDiv,
    //'bypassRowSearch': true
var rowData = api.rowData( p );  // log( rowData ); STOP

rowData = {};
rowData.item = $itemDiv[0].innerText;
rowData.category = "CHANGED!";

var p =
    'tag': $itemDiv,        
    'rowData': rowData,
    'updateGUI': true, // [ "ord_item" ],
    'bypassRowSearch': false,                                        
var ret = api.rowData( p );

if( !p.updateGUI ) $itemDiv[0].innerText = itemDivRestoreText;

if( !ret ) { alert("Error in Modification!"); return; }



If you like to have a number on every line then add this CSS rule in <head> section:

/* Prettify: use this CSS to number every line */
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;





  • Prettify can have only one theme loaded per page!