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="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian" > </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="https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js" > </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.getElementsByTagName('head')[0].appendChild(link);
}


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


//---------------------------
(function () {        
    loadTheme( getThemeName() ); // Load the selected stylesheet
})();
</script>

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.

prettyprint and linenums are two Prettify classes:
1. prettyprint: used to trigger the code highlightning
2. linenums: used to insert line numbers.
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" >

//-----------------------------------
// API - CLASSIC METHOD
                        
// GET ROW CONTENT
var p = {
    'tag': $itemDiv,
    //'bypassRowSearch': true
}    
var rowData = api.rowData( p );  // log( rowData ); STOP

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

//-----------------------------------
// SET ROW CONTENT
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; }
</pre>

Note:

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

<style>
/* 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;
}
</style>

Limitations

Prettify can have only one theme loaded per page!