Syntax highlighting code on the site with google-code-prettify

January 5, 2016 39 egor

Very often developers want to display the source code of the page with syntax highlighting and code formatting. For this puspose there are many ready-made solutions. One of them is google-code-prettify.

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
JavaScript,  code