Introduction

Over the last few weeks, I have typeset several algorithms in pseudocode using both LaTeX and HTML. Luckily, LaTeX provides several good packages for doing this, while in HTML, I tended to use nested unordered lists - <ul><li><ul>...</ul></li></ul>. Typesetting formulas within pseudocode can easily be done using MathJax. However, when highlighting keywords and comments are necessary, it can easily get annoying.

jQuery Pseudocode is a lightweight jQuery plugin for typesetting pseudocode including highlighting of keywords and comments from raw text provided in a pre element.

For a motivating example, consider the following simple algorithm:

var N = 6
var j = 4
for i = 1 to N
    // A simple if statement:
    if i = j
        N = N + 1

Usage

Using jQuery Pseudocode is quite simple: The code is directly written line-per-line in a <pre<> element. Indentation is preserved by the plugin as long as a tab consists of four whitespaces (may be adapted by the tab option) such that control flow statements can easily be used as follows:

// Simple if statement:
if i = j
    N = N + 1

<script type="text/javascript">
$(document).ready(function() {
    $('.pseudocode').pseudocode();
});
</script>
<!-- Note that the third line is indented by 4 whitespaces. -->
<pre class="pseudocode">
// A simple if statement:
if i = j
    N = N + 1
</pre>

This way, even more complex algorithms can easily be presented in a consistent and clear way. The following example illustrates the usage of the provided options: Using the keywords option, additional keywords can be added and their color can be controlled; using the comments option, comment styles and colors can be adapted; and using the tab option, the number of whitespaces needed for indentation are controlled, see below.

var N = 6
var j = 4
for i = 1 to N
  % Different comment style before if statement:
  if i = j
    N = N + 1

<script type="text/javascript">
$(document).ready(function() {
    $('#pseudocode-example').pseudocode({
        keywords: {
            'if': '#990000',
            'for': '#990000',
            'var': '#990000'
        },
        comment: {
            '//': '#AAAAAA',
            '%': '#AAAAAA'
        },
        tab: 2
    });
});
</script>
<!-- Note that the third line is indented by 4 whitespaces. -->
<pre id="pseudocode-example">
var N = 6
var j = 4
for i = 1 to N
  % Different comment style before if statement:
  if i = j
    N = N + 1
</pre>

A more complex example taken from my post on Efficient High-Quality Superpixels: SEEDS Revised. Note that the example uses MathJax:

function SEEDS(
        $I$, // Color image.
        $w^{(1)} \times h^{(1)}$, // Initial block size.
        $L$, // Number of levels.
        $Q$ // Histogram size.
    )
    initialize the block hierarchy and the initial superpixel segmentation
    // Initialize histograms for all blocks and superpixels:
    for $l = 1$ to $L$
        for each block $B_i^{(l)}$ // At level $l = L$ these are the initial superpixels.
            initialize histogram $h_{B_i^{(l)}}$
    // Block updates:
    for $l = L - 1$ to $1$
        for each block $B_i^{(l)}$
            let $S_j$ be the superpixel $B_i^{(l)}$ belongs to
            if a neighboring block belongs to a different superpixel $S_k$
                if $\cap(h_{B_i^{(l)}}, h_{S_k}) > \cap(h_{B_i^{(l)}}, h_{S_j})$
                    $S_k := S_k \cup B_i^{(l)}$, $S_j := S_j - B_i^{(l)}$
    // Pixel updates:
    for $n = 1$ to $W\cdot H$
        let $S_j$ be the superpixel $x_n$ belongs to
        if a neighboring pixel belongs to a different superpixel $S_k$
            if $h_{S_k}(h(x_n)) > h_{S_j}(h(x_n))$
                $S_k := S_k \cup \{x_n\}$, $S_j := S_j - \{x_n\}$
    return $S$

Note that detailed documentation is available at GitHub.