Prettify.JS

This is a test page for Prettify, a javascript thing for automatically coloring code.

For some reason this has been a bit of a pig to get going.

You can use Prettify with either the <pre> tag (block level) or the <code> tag which is displayed inline.

Pre

.subnav > ul, .pagenav {
    list-style-type: none;
    margin:0;
    padding:0;
    color: #93939f;
    column-count:3;
}

W HTML

<!DOCTYPE html>
<div class="container" style="background:white">
  <div class="lh">
    <h1>Prettify.JS</h1>
      <h2>Code</h2>
<--- This is a comment --->

Code only

.subnav > ul, .pagenav { list-style-type: none; margin:0; padding:0; color: #93939f; column-count:3; }

<div class="container" style="background:white"> <div class="lh"> <h1>Prettify.JS</h1> <h2>Code</h2>

Pre & Code

  
    body {
    background: #666;
    }
    .container {
    width: 70%;
    background: rgb(175, 202, 208);
    padding: 2em;
    }

Pre & Code w seperate classes in each


.subnav > ul, .pagenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  column-count: 3;
}

Prettify

There are 3 or 4 things you need to get this working (depending on whether you use a local js file or from the CDN)

If local you need:

  1. a link to the js file via a <script> tag in the head section
  2. a link to the CSS 'skin' file for the colours you want.
  3. a loading instruction in the <body> tag: <body onload="PR.prettyPrint()">
  4. add the class of 'prettyPrint' to the <pre> tags.
  5. add the language to the same class tag. For CSS it's lang-css
  6. optional - add linenums to the class attribute if you want line numbers displayed.

The options for the prettify skins are:

  • prettify: the default
  • desert
  • sunburst
  • sons-of-obsidian
  • doxy
  • Your own modification of one of the above.
These are defined in the link to the stylesheet, eg. doxy.css.

The defaults for the <pre> tag are: white-space: pre display: block and display: block

Links about this...