Google-code-prettify - is syntax highlighting markup multiple programming languages.

Consider the examples of integration

Autoloading

You can load the JavaScript and CSS of this library with the help of a single line. Before closing a tag </head>:

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

With such a load there are a number of additional capabilities.

CGI parameters Default Action
autoload=(true | false) true Autoplay after the page loads
lang=... none Name of the language highlight. If specified multiple times, it loads all (?lang=CSS&lang=html)
skin=... none Skin. If specified multiple times, then loading first successfully
callback=js_ident Will be called when prettyprinting finishes

Example of a call with options:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=desert"></script>

Your own JavaScript and CSS for syntax highlighting

Download the archive from the source: https://code.google.com/p/google-code-prettify/downloads/list

Before closing a tag </head>:

<link href='pathTo/prettify.css' rel='stylesheet' type='text/css' />
<script src='pathTo/prettify.js' type='text/javascript' />

Add onload="prettyPrint ()" to the tag <body>:

<body onload="prettyPrint()">

Your own JavaScript and CSS without adding a code to the tag <body>

Download the archive from the source: https://code.google.com/p/google-code-prettify/downloads/list

Before closing a tag </head>:

<link href='pathTo/prettify.css' rel='stylesheet' type='text/css' />

Create a file startPrettify.js and paste a code there:

$(function(){
    var $window = $(window)
    //run code pretty:
    window.prettyPrint && prettyPrint()
})

Before closing a tag </body>:

<script src='pathTo/prettify.js' type='text/javascript' />
<script src='pathTo/startPrettify.js' type='text/javascript' />

Example of usage

<pre class="prettyprint">
    <html>
        <head>
            <title>devreadwrite.com</title>
        </head>
        <body>
            <p>This is example of usage</p>
        </body>
    </html> 
</pre>

Additional possibilities

To display line numbers, add the class linenums to the tag pre:

<pre class="prettyprint linenums">
    <html>
        <head>
            <title>devreadwrite.com</title>
        </head>
        <body>
            <p>This is example of usage</p>
        </body>
    </html> 
</pre>

To show a number of each line (the default number is published every 5 lines), add CSS style:

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>

If your code does not start with the first line, you can specify the starting line number. For example, start showing a code from 5 line:

<pre class="prettyprint linenums:5">
    ...
    <?php
    echo 'Hello world!';
    ?>
    ...
</pre>

Language backlight is detected automatically, but you can specify it explicitly. For example, specify that it is HTML:

<pre class="prettyprint linenums lang-html">
    ...
</pre>

Available light programming languages: bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh, xhtml, xml, xsl.

Advantages

  • Due to the fact that this decision is written in JavaScript and CSS, only front-end is used (browser).
  • Minimal usage of browser resources
  • It does not require a specification of a programming language
  • Light weight of a source code
  • It is possible to add your own programming language and(or) a style