Pseudocode.js

Demo

To give you a sense of what pseudocode.js looks like, see the following demo:

The demo above is editable. Feel free to experiment with it by clicking on the edit button.

Features

Pseudocode.js is a JavaScript library that typesets pseudocode beautifully to HTML:

• Intuitive grammar: Pseudocode.js takes a LaTeX-style input that supports the algorithmic constructs from LaTeX's algorithm packages. With or without LaTeX experience, a user should find the grammar fairly intuitive.
• Print quality: The HTML output produced by pseudocode.js is (almost) identical with the pretty algorithms printed on publications that are typeset by LaTeX.
• Math formula support: Inserting math formulas in pseudocode.js is as easy as LaTeX. Just enclose math expression in $...$ or \(...\).

It supports all modern browsers, including Chrome, Safari, Firefox, Opera, and IE 8 - IE 11.

Usage

Download pseudocode.js, and host the files on your server. And then include the js and css files in your HTML files:

<link rel="stylesheet" href="//path/to/pseudocode/pseudocode.min.css">
<script src="//path/to/pseudocode/pseudocode.min.js"></script>

Assume the pseudocode to be rendered is in a <pre> DOM element:

<pre id="hello-world-code" style="display:hidden;">
\begin{algorithmc}
\PRINT \texttt{'hello world'}
\end{algorithmc}
</pre>

To render the above code as a HTML element and append to a parent DOM element, call pseudocode.render:

var code = document.getElementById("hello-world-code").textContent;
var parentEl = document.body;
var options = {
    lineNumber: true
};
pseudocode.render(code, parentEl, options);

For more information on the grammar and options, read the features section of README.

Author

Tate Tian(@tatetian) creates pseudocode.js. Any suggestions and bug reports are welcome.

Acknowledgement

Pseudocode.js is partially inspired by KaTeX and relies on it to render math formulas. Thanks Emily Eisenberg(@xymostech) and other contributers for building such a wonderful project.