Minor changes & clarifications in README

SaswatPadhi · SaswatPadhi · commit 3eaceeac7f53 · 2020-02-07T18:16:08.000-08:00
diff --git a/LICENSE b/LICENSE
diff --git a/Makefile b/Makefile
@@ -1,19 +1,20 @@
-.PHONY: default setup lint build release clean
+.PHONY: build clean docs default lint release setup
 
 VERSION=2.0
 
 # Building tools
 BROWSERIFY = $(realpath ./node_modules/.bin/browserify)
+CLEANCSS = $(realpath ./node_modules/.bin/cleancss)
+ESLINT = $(realpath ./node_modules/.bin/eslint)
 WATCHIFY = $(realpath ./node_modules/.bin/watchify)
 UGLIFYJS = $(realpath ./node_modules/.bin/uglifyjs) \
 	--mangle \
 	--beautify \
 	ascii_only=true,beautify=false
-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
 
 
@@ -28,6 +29,12 @@ static/katex/:
 	@echo "> Katex downloaded"
 
 
+
+watch-js: pseudocode.js $(wildcard src/*.js)
+	$(WATCHIFY) $< --standalone pseudocode -o build/pseudocode.js
+
+
+
 build: build/pseudocode.js build/pseudocode.css $(SAMPLES)
 	@echo "> Building succeeded"
 
@@ -38,17 +45,14 @@ build/pseudocode.js: pseudocode.js $(wildcard src/*.js)
 lint: pseudocode.js $(wildcard src/*.js)
 	$(ESLINT) $^
 
-# Watch the changes to js source code and update the target js code
-watch-js: pseudocode.js $(wildcard src/*.js)
-	$(WATCHIFY) $< --standalone pseudocode -o build/pseudocode.js
-
 build/pseudocode.css: static/pseudocode.css
 	cp static/pseudocode.css build/pseudocode.css
 
 build/%-samples.html: static/%-samples.html.template
 	cp $< $@
 
 
+
 release: build build/pseudocode-js.tar.gz build/pseudocode-js.zip
 	@echo "> Release package generated"
 
@@ -70,5 +74,13 @@ build/pseudocode.min.css: build/pseudocode.css
 	$(CLEANCSS) -o $@ $<
 
 
+
+docs: build/pseudocode.min.js build/pseudocode.min.css $(SAMPLES)
+	cp build/pseudocode.min.css docs/pseudocode.css
+	cp build/pseudocode.min.js docs/pseudocode.js
+	cp $(SAMPLES) docs/
+
+
+
 clean:
-	@rm -rf build/*
+	@rm -rf build/*
diff --git a/README.md b/README.md
@@ -1,36 +1,38 @@
-# Pseudocode.js - Beautiful pseudocode for the Web
+# pseudocode.js - Beautiful pseudocode for the Web
 
-Pseudocode.js is a JavaScript library that typesets pseudocode beautifully to 
+<img align="right" width="42%" src="docs/screenshot.png">
+
+**pseudocode.js** is a JavaScript library that typesets pseudocode beautifully to 
 HTML.
 
-* **Intuitive grammar**: Pseudocode.js takes a LaTeX-style input that supports 
+* _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) 
+* _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 
+* _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, Edge, and
 IE 9 - IE 11.
 
+
 ## Demo
 Visit the [project website](https://saswatpadhi.github.io/pseudocode.js) for demo.
 
+
 ## Usage
 
 ### Quick Start
 
-Pseudocode.js can render math formulas using either
+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="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>
@@ -83,68 +85,51 @@ Then include the following in the `<head>` of your page:
 <script src="//path/to/pseudocode/pseudocode.min.js"></script>
 ```
 
-
 #### 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}
-\caption{Quicksort}
-\begin{algorithmic}
-\PROCEDURE{Quicksort}{$A, p, r$}
-    \IF{$p < r$} 
-        \STATE $q = $ \CALL{Partition}{$A, p, r$}
-        \STATE \CALL{Quicksort}{$A, p, q - 1$}
-        \STATE \CALL{Quicksort}{$A, q + 1, r$}
-    \ENDIF
-\ENDPROCEDURE
-\PROCEDURE{Partition}{$A, p, r$}
-    \STATE $x = A[r]$
-    \STATE $i = p - 1$
-    \FOR{$j = p$ \TO $r - 1$}
-        \IF{$A[j] < x$}
-            \STATE $i = i + 1$
-            \STATE exchange
-            $A[i]$ with $A[j]$
+<pre id="quicksort" style="display:hidden;">
+    % This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
+    \begin{algorithm}
+    \caption{Quicksort}
+    \begin{algorithmic}
+    \PROCEDURE{Quicksort}{$A, p, r$}
+        \IF{$p < r$} 
+            \STATE $q = $ \CALL{Partition}{$A, p, r$}
+            \STATE \CALL{Quicksort}{$A, p, q - 1$}
+            \STATE \CALL{Quicksort}{$A, q + 1, r$}
         \ENDIF
-        \STATE exchange $A[i]$ with $A[r]$
-    \ENDFOR
-\ENDPROCEDURE
-\end{algorithmic}
-\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}
+    \ENDPROCEDURE
+    \PROCEDURE{Partition}{$A, p, r$}
+        \STATE $x = A[r]$
+        \STATE $i = p - 1$
+        \FOR{$j = p$ \TO $r - 1$}
+            \IF{$A[j] < x$}
+                \STATE $i = i + 1$
+                \STATE exchange
+                $A[i]$ with $A[j]$
+            \ENDIF
+            \STATE exchange $A[i]$ with $A[r]$
+        \ENDFOR
+    \ENDPROCEDURE
+    \end{algorithmic}
+    \end{algorithm}
 </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);
-```
+#### Step 4 &middot; Render the element using pseudocode.js
+Insert the following Javascript snippet at the end of your document:
 
-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);
+```html
+<script>
+    var elem = document.getElementById("hello-world-code");
+    var options = {
+        lineNumber: true
+    };
+    pseudocode.render(elem.textContent, elem.parentNode, options);
+</script>
 ```
 
 
@@ -279,7 +264,7 @@ var DEFAULT_OPTIONS = {
 ```
 
 ## Build and Test
-Pseudocode.js is written in JavaScript and built with [Node.js](https://nodejs.org).
+pseudocode.js is written in JavaScript and built with [Node.js](https://nodejs.org).
 So, make sure you have Node.js installed before building pseudocode.js.
 
 To compile the project on Ubuntu Linux, run the following commands in terminal:
@@ -294,7 +279,7 @@ 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.
+in your favorite browser to check if the algorithms are typeset correctly.
 
 
 ## Author
@@ -305,6 +290,6 @@ 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/).
+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.
+and other contributors for building such a wonderful project.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pseudocode",
-    "version": "2.0",
+    "version": "2.0.0",
     "author": {
         "name": "Saswat Padhi",
         "email": "saswat.sourav@gmail.com",
@@ -13,7 +13,7 @@
         "url": "git://github.com/SaswatPadhi/pseudocode.js"
     },
     "files": [
-        "pseudoCode.js",
+        "pseudocode.js",
         "src/"
     ],
     "devDependencies": {
diff --git a/static/katex-samples.html.template b/static/katex-samples.html.template
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Pseudocode.js Samples with KaTeX</title>
+    <title>pseudocode.js Samples with KaTeX</title>
 
     <!-- Setup KaTeX -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css"
@@ -149,19 +149,19 @@
         \end{algorithmic}
         \end{algorithm}
     </pre>
-    <script type="text/javascript">
-        var testBasics = document.getElementById("test-basics").textContent;
-        pseudocode.render(testBasics, document.body, {
+    <script>
+        var basicsEl = document.getElementById("test-basics");
+        pseudocode.render(basicsEl.textContent, basicsEl.parentNode, {
             lineNumber: false,
             noEnd: true
         });
-        var testCodes = document.getElementById("test-codes").textContent;
-        pseudocode.render(testCodes, document.body, {
+        var codesEl = document.getElementById("test-codes");
+        pseudocode.render(codesEl.textContent, codesEl.parentNode, {
             lineNumber: false,
             noEnd: false
         });
-        var testExamples = document.getElementById("test-examples").textContent;
-        pseudocode.render(testExamples, document.body, {
+        var examplesEl = document.getElementById("test-examples");
+        pseudocode.render(examplesEl.textContent, examplesEl.parentNode, {
             lineNumber: true,
             noEnd: false
         });
diff --git a/static/mathjax-v2-samples.html.template b/static/mathjax-v2-samples.html.template
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Pseudocode.js Samples with MathJax</title>
+    <title>pseudocode.js Samples with MathJax</title>
 
     <!-- Setup MathJax -->
     <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML'>
@@ -157,19 +157,19 @@
         \end{algorithmic}
         \end{algorithm}
     </pre>
-    <script type="text/javascript">
-        var testBasics = document.getElementById("test-basics").textContent;
-        pseudocode.render(testBasics, document.body, {
+    <script>
+        var basicsEl = document.getElementById("test-basics");
+        pseudocode.render(basicsEl.textContent, basicsEl.parentNode, {
             lineNumber: false,
             noEnd: true
         });
-        var testCodes = document.getElementById("test-codes").textContent;
-        pseudocode.render(testCodes, document.body, {
+        var codesEl = document.getElementById("test-codes");
+        pseudocode.render(codesEl.textContent, codesEl.parentNode, {
             lineNumber: false,
             noEnd: false
         });
-        var testExamples = document.getElementById("test-examples").textContent;
-        pseudocode.render(testExamples, document.body, {
+        var examplesEl = document.getElementById("test-examples");
+        pseudocode.render(examplesEl.textContent, examplesEl.parentNode, {
             lineNumber: true,
             noEnd: false
         });
diff --git a/static/mathjax-v3-samples.html.template b/static/mathjax-v3-samples.html.template
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Pseudocode.js Samples with MathJax</title>
+    <title>pseudocode.js Samples with MathJax</title>
 
     <!-- Setup MathJax -->
     <script>
@@ -157,19 +157,19 @@
         \end{algorithmic}
         \end{algorithm}
     </pre>
-    <script type="text/javascript">
-        var testBasics = document.getElementById("test-basics").textContent;
-        pseudocode.render(testBasics, document.body, {
+    <script>
+        var basicsEl = document.getElementById("test-basics");
+        pseudocode.render(basicsEl.textContent, basicsEl.parentNode, {
             lineNumber: false,
             noEnd: true
         });
-        var testCodes = document.getElementById("test-codes").textContent;
-        pseudocode.render(testCodes, document.body, {
+        var codesEl = document.getElementById("test-codes");
+        pseudocode.render(codesEl.textContent, codesEl.parentNode, {
             lineNumber: false,
             noEnd: false
         });
-        var testExamples = document.getElementById("test-examples").textContent;
-        pseudocode.render(testExamples, document.body, {
+        var examplesEl = document.getElementById("test-examples");
+        pseudocode.render(examplesEl.textContent, examplesEl.parentNode, {
             lineNumber: true,
             noEnd: false
         });
diff --git a/static/pseudocode.css b/static/pseudocode.css
@@ -1,4 +1,4 @@
-@import url('https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css');
 
 @font-face {
     font-family: KaTeX_Typewriter_Replace;
@@ -42,7 +42,7 @@
     text-indent: 0;
     font-size: 1em;
 }
-.ps-root .mjx-chtml {
+.ps-root .MathJax_CHTML, .ps-root .MathJax {
     text-indent: 0;
     font-size: 1em !important;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import url('https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css');`
	`1`	`+@import url('https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css');`
`2`	`2`
`3`	`3`	`@font-face {`
`4`	`4`	`font-family: KaTeX_Typewriter_Replace;`
`@@ -42,7 +42,7 @@`
`42`	`42`	`text-indent: 0;`
`43`	`43`	`font-size: 1em;`
`44`	`44`	`}`
`45`		`-.ps-root .mjx-chtml {`
	`45`	`+.ps-root .MathJax_CHTML, .ps-root .MathJax {`
`46`	`46`	`text-indent: 0;`
`47`	`47`	`font-size: 1em !important;`
`48`	`48`	`}`