Skip to content

Commit 5bfafa2

Browse files
SaswatPadhiSaswatPadhi
committed
Updated docs
1 parent 3eaceea commit 5bfafa2

File tree

12 files changed

+1102
-0
lines changed

12 files changed

+1102
-0
lines changed

‎docs/index.html‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
7+
8+
<title>pseudocode.js</title>
9+
10+
<link rel="stylesheet" href="stylesheets/styles.css">
11+
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
12+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css"
14+
integrity="sha256-zcunqSn1llgADaIPFyzrQ8USIjX2VpuxHzUwYisOwo8=" crossorigin="anonymous" />
15+
<link rel="stylesheet" href="pseudocode.css">
16+
17+
<!--[if lt IE 9]>
18+
<script src="javascripts/html5.js"></script>
19+
<![endif]-->
20+
<script src="javascripts/autosize.min.js"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"
22+
integrity="sha256-eOgo0OtLL4cdq7RdwRUiGKLX9XsIJ7nGhWEKbohmVAQ=" crossorigin="anonymous">
23+
</script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js"
25+
integrity="sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc=" crossorigin="anonymous">
26+
</script>
27+
<script src="pseudocode.js"></script>
28+
29+
<style type="text/css">
30+
body {
31+
color: #333;
32+
font-size: 18px;
33+
}
34+
h1 {
35+
font-size: 2em;
36+
}
37+
.demo-container {
38+
font-size: 1.2em;
39+
position: relative;
40+
padding-right: 2.4em;
41+
}
42+
.button {
43+
position: absolute;
44+
right: 0;
45+
top: -0.1em;
46+
font-size: 1.6em;
47+
color: #39c;
48+
}
49+
.demo-editor {
50+
width: 100%;
51+
min-height: 60px;
52+
border: none;
53+
vertical-align: top;
54+
font-size: 0.8em;
55+
margin: 0.8em 0;
56+
border-top: 3px solid #000;
57+
border-bottom: 3px solid #000;
58+
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
59+
}
60+
.demo-editor{
61+
font-size: 0.7em;
62+
display: none;
63+
}
64+
.demo-container.editing .btn-edit {
65+
display: none;
66+
}
67+
.btn-done {
68+
display: none;
69+
}
70+
.demo-container.editing .btn-done {
71+
display: inline;
72+
}
73+
.demo-container.editing .demo-editor {
74+
display: block;
75+
}
76+
.demo-container.editing .demo-result {
77+
display: none;
78+
}
79+
</style>
80+
</head>
81+
<body>
82+
<div class="wrapper">
83+
<header>
84+
<h1>pseudocode.js</h1>
85+
<p>Beautiful pseudocode for the Web</p>
86+
87+
<p class="view">
88+
<a href="https://github.com/SaswatPadhi/pseudocode.js">
89+
View the Project on GitHub
90+
<small>SaswatPadhi/pseudocode.js</small>
91+
</a>
92+
</p>
93+
94+
<ul>
95+
<li>
96+
<a href="https://github.com/SaswatPadhi/pseudocode.js/releases">
97+
Download <strong>Releases</strong>
98+
</a>
99+
</li>
100+
<li>
101+
<a href="https://github.com/SaswatPadhi/pseudocode.js/zipball/master">
102+
Download <strong>Source</strong>
103+
</a>
104+
</li>
105+
<li>
106+
<a href="https://github.com/SaswatPadhi/pseudocode.js">
107+
View On <strong>GitHub</strong>
108+
</a>
109+
</li>
110+
</ul>
111+
</header>
112+
113+
<section>
114+
<h3>Demo</h3>
115+
116+
<p>pseudocode.js enables JavaScript to typeset algorithms as <em>beautifully</em>
117+
as LaTeX does: </p>
118+
119+
<div class="demo-container">
120+
<a class="btn-edit" href="#" onClick="toggleEdit(event)"><div class="fas fa-edit button"></div></a>
121+
<a class="btn-done" href="#" onClick="toggleEdit(event)"><div class="fas fa-caret-square-right button"></div></a>
122+
<div class="demo-result">
123+
</div>
124+
<textarea class="demo-editor">
125+
% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
126+
\begin{algorithm}
127+
\caption{Quicksort}
128+
\begin{algorithmic}
129+
\PROCEDURE{Quicksort}{$A, p, r$}
130+
\IF{$p < r$}
131+
\STATE $q = $ \CALL{Partition}{$A, p, r$}
132+
\STATE \CALL{Quicksort}{$A, p, q - 1$}
133+
\STATE \CALL{Quicksort}{$A, q + 1, r$}
134+
\ENDIF
135+
\ENDPROCEDURE
136+
\PROCEDURE{Partition}{$A, p, r$}
137+
\STATE $x = A[r]$
138+
\STATE $i = p - 1$
139+
\FOR{$j = p$ \TO $r - 1$}
140+
\IF{$A[j] < x$}
141+
\STATE $i = i + 1$
142+
\STATE exchange
143+
$A[i]$ with $A[j]$
144+
\ENDIF
145+
\STATE exchange $A[i]$ with $A[r]$
146+
\ENDFOR
147+
\ENDPROCEDURE
148+
\end{algorithmic}
149+
\end{algorithm}</textarea>
150+
</div>
151+
152+
<p> The demo above is editable. Feel free to experiment with it by clicking
153+
on the edit button. </p>
154+
155+
<h3>Features</h3>
156+
157+
<p>pseudocode.js is a JavaScript library that typesets pseudocode
158+
beautifully to HTML: </p>
159+
160+
<ul>
161+
<li><strong>Intuitive grammar:</strong>
162+
pseudocode.js takes a LaTeX-style input that supports the
163+
algorithmic constructs from LaTeX's algorithm packages. With or
164+
without LaTeX experience, a user should find the grammar fairly intuitive.
165+
</li>
166+
<li><strong>Print quality:</strong>
167+
The HTML output produced by pseudocode.js is (almost) identical
168+
with the pretty algorithms printed on publications that
169+
are typeset by LaTeX.</li>
170+
<li><strong>Math formula support:</strong>
171+
Inserting math formulas in pseudocode.js is as easy as LaTeX. Just
172+
enclose math expression in <code>$...$</code> or
173+
<code>\(...\)</code>.
174+
</li>
175+
</ul>
176+
</p>
177+
178+
<p>It supports all modern browsers, including Chrome, Safari,
179+
Firefox, Opera, and IE 8 - IE 11. </p>
180+
181+
<h3>Usage</h3>
182+
183+
<p style='text-align: justify;'>
184+
Pseudocode.js supports multiple backends to render math formulas.
185+
If you want to include any math formulas in your pseudocode,
186+
please make sure that either <a href="https://github.com/Khan/KaTeX#usage">KaTeX</a>
187+
or <a href="https://www.mathjax.org/#gettingstarted">MathJax</a>
188+
is properly setup in your document.
189+
</p>
190+
191+
<p>
192+
Download <a href="https://github.com/SaswatPadhi/pseudocode.js/releases">pseudocode.js</a>,
193+
and host the files on your server. And then include the js and css files in your HTML files:
194+
</p>
195+
196+
<pre><code class="language-html">&lt;link rel="stylesheet" href="//path/to/pseudocode/pseudocode.min.css"&gt;
197+
&lt;script src="//path/to/pseudocode/pseudocode.min.js"&gt;&lt;/script&gt;</code></pre>
198+
199+
<p>Place the pseudocode to be rendered in a <code>&lt;pre&gt;</code> element:</p>
200+
201+
<pre><code class="language-html">&lt;pre id="hello-world-code" style="display:hidden;"&gt;
202+
\begin{algorithmic}
203+
\PRINT \texttt{'hello world'}
204+
\end{algorithmic}
205+
&lt;/pre&gt;</code></pre>
206+
207+
<p>
208+
Finally, call <code>pseudocode.render</code> by placing the following Javascript snippet
209+
at the end of your document body:
210+
</p>
211+
212+
<pre><code class="language-html">&lt;script&gt;
213+
var elem = document.getElementById("hello-world-code");
214+
var options = {
215+
lineNumber: true
216+
};
217+
pseudocode.render(elem.textContent, elem.parentNode, options);
218+
&lt;/script&gt;</code></pre>
219+
220+
<p>
221+
For more details on available options and backends, please see the
222+
<a href="https://github.com/SaswatPadhi/pseudocode.js#usage">usage section of README</a>.
223+
</p>
224+
225+
<h3>Author</h3>
226+
<p style='text-align: justify;'>
227+
pseudocode.js was originally written by Tate Tian (<a href="https://github.com/tatetian">@tatetian</a>).
228+
Together with <a href="https://github.com/ZJUGuoShuai">@ZJUGuoShuai</a>,
229+
I (<a href="https://github.com/SaswatPadhi">@SaswatPadhi</a>) added the MathJax support,
230+
and I am the current maintainer of this project.
231+
Suggestions, bug reports and pull requests are most welcome.
232+
</p>
233+
234+
<h3>Acknowledgement</h3>
235+
<p style='text-align: justify;'>
236+
Pseudocode.js is partially inspired by <a href="http://khan.github.io/KaTeX/">KaTeX</a>
237+
and relies on it to render math formulas.
238+
Thanks Emily Eisenberg(<a href="https://github.com/xymostech">@xymostech</a>)
239+
and other contributers for building such a wonderful project.
240+
</p>
241+
</section>
242+
243+
<footer>
244+
<p>This project is maintained by
245+
<a href="https://github.com/SaswatPadhi">Saswat Padhi</a>
246+
</p>
247+
<p>
248+
<small>Hosted on GitHub Pages &mdash; Theme by
249+
<a href="https://github.com/orderedlist">orderedlist</a>
250+
</small>
251+
</p>
252+
</footer>
253+
</div>
254+
<script src="javascripts/scale.fix.js"></script>
255+
<script>
256+
hljs.initHighlightingOnLoad();
257+
258+
var editorEl = document.getElementsByClassName('demo-editor')[0];
259+
260+
function renderPseudocode() {
261+
var resultEl = document.getElementsByClassName('demo-result')[0];
262+
resultEl.innerHTML = '';
263+
var options = {
264+
captionCount: 0,
265+
lineNumber: true
266+
};
267+
pseudocode.render(editorEl.value, resultEl, options);
268+
}
269+
270+
function toggleEdit(e) {
271+
if (e) e.preventDefault();
272+
273+
var demoContainerEl = document.getElementsByClassName('demo-container')[0];
274+
var editing = demoContainerEl.classList.contains('editing');
275+
if (editing) {
276+
try {
277+
renderPseudocode();
278+
} catch(e) {
279+
console.log(e);
280+
return;
281+
}
282+
demoContainerEl.classList.remove('editing');
283+
}
284+
else {
285+
demoContainerEl.classList.add('editing');
286+
autosize(editorEl);
287+
}
288+
}
289+
290+
renderPseudocode();
291+
</script>
292+
</body>
293+
</html>

‎docs/javascripts/autosize.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/javascripts/html5shiv.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/javascripts/scale.fix.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var metas = document.getElementsByTagName('meta');
2+
var i;
3+
if (navigator.userAgent.match(/iPhone/i)) {
4+
for (i=0; i<metas.length; i++) {
5+
if (metas[i].name == "viewport") {
6+
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
7+
}
8+
}
9+
document.addEventListener("gesturestart", gestureStart, false);
10+
}
11+
function gestureStart() {
12+
for (i=0; i<metas.length; i++) {
13+
if (metas[i].name == "viewport") {
14+
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
15+
}
16+
}
17+
}

0 commit comments

Comments
 (0)