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.