Prettify GC Syntax Highlighter

By
Lex
– February 15, 2011Posted in: Uncategorized

I think the google-code syntax highlighter is one of the best available open source highlighters. However I could not find a good enough WordPress plugin that uses it. So here is a small WP plugin that does just that:

Download.

This plugin has prettify.js copied (unmodified) directly from google-code source browser. So your code will look exactly like it does on google-code.

Usage

You can use it as follows:

<pre class="prettyprint">
  // Put your code here.
</pre>

Here is a Scala example with the highlighter in action:

object Main {

  def main(args: Array[String]) {
    println("Hello world!")
  }
}

Making Code HTML Safe

The plugin automatically makes highlighted code html-safe:

<pre class="prettyprint">
  Anything that goes here will be quoted to appear on the page as-is.
  For example: <head></head><body></body>
</pre>

To avoid quoting your code, add dontquote as the first class:

<pre class="dontquote prettyprint">
  Remember to quote manually.
  For example: &lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;
</pre>

Line Numbering

Line numbdering can be enabled as follows:

<pre class="prettyprint linenums">
  // Put your code here.
</pre>

If you want to start with a line number 42, you can do the following:

<pre class="prettyprint linenums:42">
  // Put your code here.
</pre>

Highlighting Lines

When line numbering is enabled you can highlight one or several lines of code using the highlight class:

<pre class="prettyprint lang-YOURLANG linenums highlight:2,4">
  // line 2
  // line 3
  // line 4
</pre>

Alternatively you can highlight one or several code segments:

<pre class="prettyprint lang-YOURLANG linenums highlight:1-3,5-6">
  // line 2
  // line 3
  // line 4
  // line 5
</pre>

Note: This feature is not available when line numbering is disabled.

Specifying Language

Most of the time the highlighter will do a good job guessing how to highlight the code. However, to achieve the best result, you should specify the language:

<pre class="prettyprint lang-YOURLANG">
  // Put your code here.
</pre>

Replace YOURLANG with one of the following:

  • aea
  • agc
  • apollo
  • bsh
  • c
  • cc
  • cl
  • cpp
  • cs
  • csh
  • css-str
  • cv
  • cxx
  • cyc
  • default-markup
  • el
  • fs
  • go
  • hs
  • htm
  • html
  • java
  • js
  • json
  • lisp
  • lua
  • m
  • ml
  • mxml
  • perl
  • pl
  • pm
  • proto
  • py
  • rb
  • scala
  • scm
  • sh
  • sql
  • vhd
  • vhdl
  • wiki
  • xhtml
  • xml
  • xsl
  • yaml
  • yml

Changing Background

To adjust the background for all the code fragments add this to your css:

.prettyprint { background-color: #FAD4FF; }

Changing a single code fragment:

<pre class="prettyprint lang-YOURLANG" style="background-color: #FFE4BB;" >
  // Put your code here.
</pre>

You can add a marker class to your css:

.special { background-color: #C0FFB3 !important; }

then use the marker when highlighting:

<pre class="prettyprint lang-YOURLANG special">
  // Put your code here.
</pre>

Please Support

If you like Prettify GC Syntax Highlighter plugin, please donate a minute of your time and vote for it. Thank you!

Tags: