IAM

OPENSOURCEFAN STUDYING
STUDYINGCOMPUTERSCIENCEANDMATH COMPUTERSCIENCE

Check out the latest superpixel benchmark — Superpixel Benchmark (2016) — and let me know your opinion! @david_stutz

ARTICLE

jQuery Pseudocode

Among scientific publications, pseudocode is a common tool to formalize algorithms in a language-independent way. While (La)TeX provides several packages for typesetting algorithms using pseudocode, and JavaScript-based syntax highlighters are common among web developers, there are (to the best of my knowledge) no plugins to easily typeset pseudocode in HTML. So, this article presents a lightweight jQuery plugin for generating pretty pseudocode based on indentation similar to Python.

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.

jQuery Pseudocode on GitHub

For a motivating example, see below.

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

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

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.

What is your opinion on this article? Did you find it interesting or useful? Let me know your thoughts in the comments below or get in touch with me:

@david_stutz