SaswatPadhi · SaswatPadhi · Jan 21, 2020 · Apr 29, 2019 · Jan 21, 2020 · Jan 21, 2020
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -1,6 +1,7 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Tate Tian (tatetian@gmail.com)
+Copyright (c) 2020 Saswat Padhi (saswat.sourav@gmail.com)
+Copyright (c) 2015-2019 Tate Tian (tatetian@gmail.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/Makefile b/Makefile
@@ -1,6 +1,6 @@
 .PHONY: default setup lint build release clean
 
-VERSION=1.1
+VERSION=2.0
 
 # Building tools
 BROWSERIFY = $(realpath ./node_modules/.bin/browserify)
@@ -12,6 +12,8 @@ UGLIFYJS = $(realpath ./node_modules/.bin/uglifyjs) \
 CLEANCSS = $(realpath ./node_modules/.bin/cleancss)
 ESLINT = $(realpath ./node_modules/.bin/eslint)
 
+SAMPLES = build/katex-samples.html build/mathjax-v2-samples.html build/mathjax-v3-samples.html
+
 default: build
 
 
@@ -21,12 +23,12 @@ setup: static/katex/
 
 static/katex/:
 	@rm -rf static/katex
-	cd static && wget https://github.com/Khan/KaTeX/releases/download/v0.8.0/katex.zip && unzip katex.zip
+	cd static && wget https://github.com/Khan/KaTeX/releases/download/v0.11.1/katex.zip && unzip katex.zip
 	@rm -rf static/katex.zip
 	@echo "> Katex downloaded"
 
 
-build: build/pseudocode.js build/pseudocode.css build/samples.html
+build: build/pseudocode.js build/pseudocode.css $(SAMPLES)
 	@echo "> Building succeeded"
 
 build/pseudocode.js: pseudocode.js $(wildcard src/*.js)
@@ -43,7 +45,7 @@ watch-js: pseudocode.js $(wildcard src/*.js)
 build/pseudocode.css: static/pseudocode.css
 	cp static/pseudocode.css build/pseudocode.css
 
-build/samples.html: static/samples.html.template
+build/%-samples.html: static/%-samples.html.template
 	cp $< $@
 
 
@@ -57,7 +59,7 @@ build/pseudocode-js.tar.gz: build/$(RELEASE_DIR)
 build/pseudocode-js.zip: build/$(RELEASE_DIR)
 	cd build && zip -rq pseudocode-js.zip $(RELEASE_DIR)
 
-build/$(RELEASE_DIR): build/pseudocode.js build/pseudocode.min.js build/pseudocode.css build/pseudocode.min.css build/samples.html README.md
+build/$(RELEASE_DIR): build/pseudocode.js build/pseudocode.min.js build/pseudocode.css build/pseudocode.min.css $(SAMPLES) README.md
 	mkdir -p build/$(RELEASE_DIR)
 	cp -r $^ build/$(RELEASE_DIR)
 

diff --git a/README.md b/README.md
@@ -16,57 +16,78 @@ It supports all modern browsers, including Chrome, Safari, Firefox, Edge, and
 IE 9 - IE 11.
 
 ## Demo
-Visit the [project website](http://www.tatetian.io/pseudocode.js) for demo.
+Visit the [project website](https://saswatpadhi.github.io/pseudocode.js) for demo.
 
 ## Usage
 
 ### Quick Start
-Download [pseudocode.js](https://github.com/tatetian/pseudocode.js/releases), 
-and host the files on your server. And then include the `js` and `css` files in 
-your HTML files:
+
+Pseudocode.js can render math formulas using either
+[KaTeX](https://github.com/Khan/KaTeX), or [MathJax](https://www.mathjax.org/).
+
+#### Step 1A &middot; For KaTeX users
+Include the following in the `<head>` of your page:
 
 ```html
-<link rel="stylesheet" href="//path/to/pseudocode/pseudocode.min.css">
-<script src="//path/to/pseudocode/pseudocode.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css"
+        integrity="sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung=" crossorigin="anonymous" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js"
+        integrity="sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc=" crossorigin="anonymous">
+</script>
 ```
 
-Pseudocode.js depends on [KaTeX](https://github.com/Khan/KaTeX) to render math 
-formulas and uses KaTeX's fonts to render texts. So make sure that [KaTeX is 
-setup](https://github.com/Khan/KaTeX#usage) properly.
+#### Step 1B &middot; For MathJax 2.x users
+Include the following in the `<head>` of your page:
 
-Assume the pseudocode to be rendered is in a `<pre>` DOM element:
 ```html
-<pre id="hello-world-code" style="display:hidden;">
-\begin{algorithmc}
-\PRINT \texttt{'hello world'}
-\end{algorithmc}
-</pre>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML'>
+</script>
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+        tex2jax: {
+            inlineMath: [['$','$'], ['\\(','\\)']],
+            displayMath: [['$$','$$'], ['\[','\]']],
+            processEscapes: true,
+            processEnvironments: true,
+        }
+    });
+</script>
 ```
 
-To render the above code as a HTML element and append to a parent DOM element, 
-call `pseudocode.render`:
-```js
-var code = document.getElementById("hello-world-code").textContent;
-var parentEl = document.body;
-var options = {
-    lineNumber: true
-};
-pseudocode.render(code, parentEl, options);
+#### Step 1C &middot; For MathJax 3.x users
+Include the following in the `<head>` of your page:
+
+```html
+<script>
+    MathJax = {
+        tex: {
+            inlineMath: [['$','$'], ['\\(','\\)']],
+            displayMath: [['$$','$$'], ['\[','\]']],
+            processEscapes: true,
+            processEnvironments: true,
+        }
+    }
+</script>
+<script src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-chtml.js"
+        integrity="sha256-3Fdoa5wQb+JYfEmTpQHx9sc/GuwpfC/0R9EpBki+mf8=" crossorigin>
+</script>
 ```
 
-To generate a string of rendered HTML, call `pseudocode.renderToString`:
-```js
-var code = document.getElementById("hello-world-code").textContent;
-var options = {
-    lineNumber: true
-};
-var htmlStr = pseudocode.renderToString(code, options);
-console.log(htmlStr);
+#### Step 2 &middot; Grab pseudocode.js
+Download a stable release of [pseudocode.js](https://github.com/SaswatPadhi/pseudocode.js/releases), 
+and host the files on your server.
+Then include the following in the `<head>` of your page:
+
+```html
+<link rel="stylesheet" href="//path/to/pseudocode/pseudocode.min.css">
+<script src="//path/to/pseudocode/pseudocode.min.js"></script>
 ```
 
-### Example
-To give you a sense of the grammar for pseudocode, here is an example that 
-illustrates a quicksort algorithm:
+
+#### Step 3 &middot; Write your pseudocode inside a `<pre>`
+We assume the pseudocode to be rendered is in a `<pre>` DOM element.
+Here is an example that illustrates a quicksort algorithm:
+
 ```tex
 % This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
 \begin{algorithm}
@@ -95,6 +116,38 @@ illustrates a quicksort algorithm:
 \end{algorithm}</textarea>
 ```
 
+### API
+Assume the pseudocode to be rendered is in a `<pre>` DOM element:
+```html
+<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`:
+```js
+var code = document.getElementById("hello-world-code").textContent;
+var parentEl = document.body;
+var options = {
+    lineNumber: true
+};
+pseudocode.render(code, parentEl, options);
+```
+
+To generate a string of rendered HTML, call `pseudocode.renderToString`:
+```js
+var code = document.getElementById("hello-world-code").textContent;
+var options = {
+    lineNumber: true
+};
+var htmlStr = pseudocode.renderToString(code, options);
+console.log(htmlStr);
+```
+
+
 ### Grammar
 There are several packages for typesetting algorithms in LaTeX, among which 
 [`algorithmic`](http://mirror.ctan.org/tex-archive/macros/latex/contrib/algorithms/algorithms.pdf)
@@ -237,17 +290,21 @@ make setup
 make
 ```
 
-Then, open `static/test-suite.html` in your favourite browser to see whether 
-algorithms are typeset correctly.
+Then, open one of the sample documents:
+- `build/katex-samples.html`, or
+- `build/mathjax-v2-samples.html`, or
+- `build/mathjax-v3-samples.html`
+in your favourite browser to check if the algorithms are typeset correctly.
 
 
 ## Author
-Tate Tian ([@tatetian](https://github.com/tatetian)) creates pseudocode.js. Any 
-suggestions and bug reports are welcome.
+pseudocode.js was originally written by Tate Tian ([@tatetian](https://github.com/tatetian)).
+Together with [@ZJUGuoShuai](https://github.com/ZJUGuoShuai),
+I ([@SaswatPadhi](https://github.com/SaswatPadhi)) added the MathJax support,
+and I am the current maintainer of this project.
+Suggestions, bug reports and pull requests are most welcome.
 
 ## Acknowledgement
-Pseudocode.js is partially inspired by [KaTeX](http://khan.github.io/KaTeX/) and 
-relies on it to render math formulas.
+Pseudocode.js is partially inspired by [KaTeX](http://khan.github.io/KaTeX/).
 Thanks Emily Eisenberg([@xymostech](https://github.com/xymostech))
 and other contributers for building such a wonderful project.
-
diff --git a/package.json b/package.json
@@ -1,19 +1,19 @@
 {
     "name": "pseudocode",
-    "version": "1.1.1",
+    "version": "2.0",
     "author": {
-        "name": "Tate Tian",
-        "email": "tatetian@gmail.com",
-        "url": "http://www.tatetian.me"
+        "name": "Saswat Padhi",
+        "email": "saswat.sourav@gmail.com",
+        "url": "https://saswatpadhi.github.io/"
     },
     "description": "Beautiful pseudocode for the Web",
     "main": "pseudocode.js",
     "repository": {
         "type": "git",
-        "url": "git://github.com/tatetian/pseudocode.js"
+        "url": "git://github.com/SaswatPadhi/pseudocode.js"
     },
     "files": [
-        "PseudoCode.js",
+        "pseudoCode.js",
         "src/"
     ],
     "devDependencies": {

diff --git a/src/Renderer.js b/src/Renderer.js
@@ -3,7 +3,7 @@
 var utils = require('./utils');
 
 /*
- * TextStyle - used by TextEnvironment class to  handles LaTeX text-style
+ * TextStyle - used by TextEnvironment class to handle LaTeX text-style
  * commands or declarations.
  *
  * The font declarations are:
@@ -141,7 +141,7 @@ TextEnvironment.prototype._renderCloseText = function(node) {
     var newTextStyle = new TextStyle(this._textStyle.fontSize());
     var closeTextEnv = new TextEnvironment(node.children, newTextStyle);
     if (node.whitespace) this._html.putText(' ');
-    this._html.putSpan(closeTextEnv.renderToHTML());
+    this._html.putHTML(closeTextEnv.renderToHTML());
 };
 
 TextEnvironment.prototype.renderToHTML = function() {
@@ -160,12 +160,24 @@ TextEnvironment.prototype.renderToHTML = function() {
                 this._html.putText(text);
                 break;
             case 'math':
-                if (!katex) {
+                useKatex = true;
+                if (typeof katex === 'undefined') {
                     try { katex = require('katex'); }
-                    catch (e) { throw 'katex is required to render math'; }
+                    catch (e) {
+                        if (typeof MathJax === 'undefined') {
+                            throw 'KaTeX or MathJax is required to render math';
+                        }
+                        var useKatex = false;
+                    }
                 }
-                var mathHTML = katex.renderToString(text);
-                this._html.putSpan(mathHTML);
+
+                if (useKatex) { // KaTeX
+                    this._html.putHTML(katex.renderToString(text));
+                }
+                else { // MathJax
+                    this._html.putText("$" + text + "$");
+                }
+
                 break;
             case 'cond-symbol':
                 this._html
@@ -244,7 +256,7 @@ TextEnvironment.prototype.renderToHTML = function() {
                 this._html.beginSpan(null, this._textStyle.toCSS());
                 var textEnvForDclr = new TextEnvironment(this._nodes,
                                                          this._textStyle);
-                this._html.putSpan(textEnvForDclr.renderToHTML());
+                this._html.putHTML(textEnvForDclr.renderToHTML());
                 this._html.endSpan();
                 break;
             case 'font-cmd':
@@ -256,7 +268,7 @@ TextEnvironment.prototype.renderToHTML = function() {
                 this._html.beginSpan(null, innerTextStyle.toCSS());
                 var textEnvForCmd = new TextEnvironment(textNode.children,
                                                         innerTextStyle);
-                this._html.putSpan(textEnvForCmd.renderToHTML());
+                this._html.putHTML(textEnvForCmd.renderToHTML());
                 this._html.endSpan();
                 break;
             default:
@@ -308,8 +320,7 @@ HTMLBuilder.prototype.endSpan = function() {
     return this._endTag('span');
 };
 
-HTMLBuilder.prototype.putHTML =
-HTMLBuilder.prototype.putSpan = function(html) {
+HTMLBuilder.prototype.putHTML = function(html) {
     this._flushText();
     this._body.push(html);
     return this;
@@ -799,13 +810,13 @@ Renderer.prototype._buildTree = function(node) {
         case 'open-text':
             var openTextEnv = new TextEnvironment(node.children,
                                                   this._globalTextStyle);
-            this._html.putSpan(openTextEnv.renderToHTML());
+            this._html.putHTML(openTextEnv.renderToHTML());
             break;
         case 'close-text':
             var outerFontSize = this._globalTextStyle.fontSize();
             var newTextStyle = new TextStyle(outerFontSize);
             var closeTextEnv = new TextEnvironment(node.children, newTextStyle);
-            this._html.putSpan(closeTextEnv.renderToHTML());
+            this._html.putHTML(closeTextEnv.renderToHTML());
             break;
         default:
             throw new ParseError('Unexpected ParseNode of type ' + node.type);