# DAVIDSTUTZ

Check out our latest research on weakly-supervised 3D shape completion.

## 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.

#### Latest Commits

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

&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)}}$
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)}$
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$