@@ -16,57 +16,78 @@ It supports all modern browsers, including Chrome, Safari, Firefox, Edge, and
1616IE 9 - IE 11.
1717
1818## Demo
19- Visit the [ project website] ( http ://www.tatetian .io/pseudocode.js) for demo.
19+ Visit the [ project website] ( https ://saswatpadhi.github .io/pseudocode.js) for demo.
2020
2121## Usage
2222
2323### Quick Start
24- Download [ pseudocode.js] ( https://github.com/tatetian/pseudocode.js/releases ) ,
25- and host the files on your server. And then include the ` js ` and ` css ` files in
26- your HTML files:
24+
25+ Pseudocode.js can render math formulas using either
26+ [ KaTeX] ( https://github.com/Khan/KaTeX ) , or [ MathJax] ( https://www.mathjax.org/ ) .
27+
28+ #### Step 1A · ; For KaTeX users
29+ Include the following in the ` <head> ` of your page:
2730
2831``` html
29- <link rel =" stylesheet" href =" //path/to/pseudocode/pseudocode.min.css"
30- <script src =" //path/to/pseudocode/pseudocode.min.js" script >
32+ <link rel =" stylesheet" href =" https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css"
33+ integrity =" sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung=" crossorigin =" anonymous"
34+ <script src =" https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js"
35+ integrity =" sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc=" crossorigin =" anonymous"
36+ script >
3137```
3238
33- Pseudocode.js depends on [ KaTeX] ( https://github.com/Khan/KaTeX ) to render math
34- formulas and uses KaTeX's fonts to render texts. So make sure that [ KaTeX is
35- setup] ( https://github.com/Khan/KaTeX#usage ) properly.
39+ #### Step 1B · ; For MathJax 2.x users
40+ Include the following in the ` <head> ` of your page:
3641
37- Assume the pseudocode to be rendered is in a ` <pre> ` DOM element:
3842``` html
39- <pre id =" hello-world-code" style =" display hidden ;"
40- \begin{algorithmc}
41- \PRINT \texttt{'hello world'}
42- \end{algorithmc}
43- </pre >
43+ <script src =' https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML'
44+ script >
45+ <script type =" text/x-mathjax-config"
46+ MathJax .Hub .Config ({
47+ tex2jax: {
48+ inlineMath: [[' $' ' $' ' \\ (' ' \\ )'
49+ displayMath: [[' $$' ' $$' ' \[ ' ' \] '
50+ processEscapes: true ,
51+ processEnvironments: true ,
52+ }
53+ });
54+ script >
4455```
4556
46- To render the above code as a HTML element and append to a parent DOM element,
47- call ` pseudocode.render ` :
48- ``` js
49- var code = document .getElementById (" hello-world-code" textContent ;
50- var parentEl = document .body ;
51- var options = {
52- lineNumber: true
53- };
54- pseudocode .render (code, parentEl, options);
57+ #### Step 1C · ; For MathJax 3.x users
58+ Include the following in the ` <head> ` of your page:
59+
60+ ``` html
61+ <script >
62+ MathJax = {
63+ tex: {
64+ inlineMath: [[' $' ' $' ' \\ (' ' \\ )'
65+ displayMath: [[' $$' ' $$' ' \[ ' ' \] '
66+ processEscapes: true ,
67+ processEnvironments: true ,
68+ }
69+ }
70+ script >
71+ <script src =" https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-chtml.js"
72+ integrity =" sha256-3Fdoa5wQb+JYfEmTpQHx9sc/GuwpfC/0R9EpBki+mf8=" crossorigin >
73+ script >
5574```
5675
57- To generate a string of rendered HTML, call ` pseudocode.renderToString ` :
58- ``` js
59- var code = document . getElementById ( " hello-world-code " ). textContent ;
60- var options = {
61- lineNumber : true
62- };
63- var htmlStr = pseudocode . renderToString (code, options);
64- console . log (htmlStr);
76+ #### Step 2 & middot ; Grab pseudocode.js
77+ Download a stable release of [ pseudocode.js ] ( https://github.com/SaswatPadhi/pseudocode.js/releases ) ,
78+ and host the files on your server.
79+ Then include the following in the ` <head> ` of your page:
80+
81+ ``` html
82+ < link rel = " stylesheet " href = " //path/to/ pseudocode/pseudocode.min.css " >
83+ < script src = " //path/to/pseudocode/pseudocode.min.js " ></ script >
6584```
6685
67- ### Example
68- To give you a sense of the grammar for pseudocode, here is an example that
69- illustrates a quicksort algorithm:
86+
87+ #### Step 3 · ; Write your pseudocode inside a ` <pre> `
88+ We assume the pseudocode to be rendered is in a ` <pre> ` DOM element.
89+ Here is an example that illustrates a quicksort algorithm:
90+
7091``` tex
7192% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
7293\begin{algorithm}
@@ -95,6 +116,38 @@ illustrates a quicksort algorithm:
95116\end{algorithm}</textarea>
96117```
97118
119+ ### API
120+ Assume the pseudocode to be rendered is in a ` <pre> ` DOM element:
121+ ``` html
122+ <pre id =" hello-world-code" style =" display hidden ;"
123+ \begin{algorithmc}
124+ \PRINT \texttt{'hello world'}
125+ \end{algorithmc}
126+ </pre >
127+ ```
128+
129+ To render the above code as a HTML element and append to a parent DOM element,
130+ call ` pseudocode.render ` :
131+ ``` js
132+ var code = document .getElementById (" hello-world-code" textContent ;
133+ var parentEl = document .body ;
134+ var options = {
135+ lineNumber: true
136+ };
137+ pseudocode .render (code, parentEl, options);
138+ ```
139+
140+ To generate a string of rendered HTML, call ` pseudocode.renderToString ` :
141+ ``` js
142+ var code = document .getElementById (" hello-world-code" textContent ;
143+ var options = {
144+ lineNumber: true
145+ };
146+ var htmlStr = pseudocode .renderToString (code, options);
147+ console .log (htmlStr);
148+ ```
149+
150+
98151### Grammar
99152There are several packages for typesetting algorithms in LaTeX, among which
100153[ ` algorithmic ` ] ( http://mirror.ctan.org/tex-archive/macros/latex/contrib/algorithms/algorithms.pdf )
@@ -237,17 +290,21 @@ make setup
237290make
238291```
239292
240- Then, open ` static/test-suite.html ` in your favourite browser to see whether
241- algorithms are typeset correctly.
293+ Then, open one of the sample documents:
294+ - ` build/katex-samples.html ` , or
295+ - ` build/mathjax-v2-samples.html ` , or
296+ - ` build/mathjax-v3-samples.html `
297+ in your favourite browser to check if the algorithms are typeset correctly.
242298
243299
244300## Author
245- Tate Tian ([ @tatetian ] ( https://github.com/tatetian ) ) creates pseudocode.js. Any
246- suggestions and bug reports are welcome.
301+ pseudocode.js was originally written by Tate Tian ([ @tatetian ] ( https://github.com/tatetian ) ).
302+ Together with [ @ZJUGuoShuai ] ( https://github.com/ZJUGuoShuai ) ,
303+ I ([ @SaswatPadhi ] ( https://github.com/SaswatPadhi ) ) added the MathJax support,
304+ and I am the current maintainer of this project.
305+ Suggestions, bug reports and pull requests are most welcome.
247306
248307## Acknowledgement
249- Pseudocode.js is partially inspired by [ KaTeX] ( http://khan.github.io/KaTeX/ ) and
250- relies on it to render math formulas.
308+ Pseudocode.js is partially inspired by [ KaTeX] ( http://khan.github.io/KaTeX/ ) .
251309Thanks Emily Eisenberg([ @xymostech ] ( https://github.com/xymostech ) )
252310and other contributers for building such a wonderful project.
253-
0 commit comments