Skip to content

Commit

Permalink
Bug fixes for MathJax and added renderElement
Browse files Browse the repository at this point in the history
  • Loading branch information
@SaswatPadhi
SaswatPadhi committed Feb 9, 2020
1 parent 84b8598 commit 8bbbd69
Show file tree
Hide file tree
Showing 19 changed files with 271 additions and 504 deletions.
2 changes: 1 addition & 1 deletion .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"max-len": [2, 84, 4, { "ignoreUrls": true, "ignorePattern": "\\brequire\\([\"']|eslint-disable", "ignoreComments": true, }],
"no-alert": 2,
"no-array-constructor": 2,
"no-console": 2,
"no-console": 0,
"no-const-assign": 2,
"no-constant-condition": 0,
"no-debugger": 2,
Expand Down
15 changes: 8 additions & 7 deletions Makefile
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.PHONY: all build clean docs default lint release setup

VERSION=2.0.0
VERSION=2.1.0

# Building tools
BROWSERIFY = $(realpath ./node_modules/.bin/browserify)
Expand All @@ -15,11 +15,12 @@ UGLIFYJS = $(realpath ./node_modules/.bin/uglifyjs) \
SAMPLES = build/katex-samples.html build/mathjax-v2-samples.html build/mathjax-v3-samples.html


all : clean build docs release

default: build


all : clean build docs release


setup: static/katex/
npm install
@echo "> Node.js packages installed"
Expand All @@ -42,20 +43,20 @@ build: build/pseudocode.js build/pseudocode.css $(SAMPLES)

build/pseudocode.js: pseudocode.js $(wildcard src/*.js)
@$(MAKE) --no-print-directory lint
$(BROWSERIFY) $< --exclude katex --standalone pseudocode -o $@
$(BROWSERIFY) $< --exclude mathjax --exclude katex --standalone pseudocode -o $@

lint: pseudocode.js $(wildcard src/*.js)
$(ESLINT) $^

build/pseudocode.css: static/pseudocode.css
cp static/pseudocode.css build/pseudocode.css

build/%-samples.html: static/%-samples.html.template
cp $< $@
build/%-samples.html: static/%.html.part static/body.html.part static/footer.html.part
cat $^ > $@



release: build build/pseudocode-js.tar.gz build/pseudocode-js.zip
release: build docs build/pseudocode-js.tar.gz build/pseudocode-js.zip
@echo "> Release package generated"

RELEASE_DIR=pseudocode.js-$(VERSION)/
Expand Down
22 changes: 13 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# pseudocode.js - Beautiful pseudocode for the Web
# pseudocode.js

<img align="right" width="40%" src="docs/screenshot.png">

Expand Down Expand Up @@ -122,11 +122,7 @@ Insert the following Javascript snippet at the end of your document:

```html
<script>
var elem = document.getElementById("quicksort");
var options = {
lineNumber: true
};
pseudocode.render(elem.textContent, elem.parentNode, options);
pseudocode.renderElement(document.getElementById("quicksort"));
</script>
```

Expand Down Expand Up @@ -236,8 +232,15 @@ To display the caption of an algorithm, use `algorithm` environment as a 'float'
```

### Options
Function `pseudocode.renderToString` and `pseudocode.renderToString` can accept
an option as the last argument.
`pseudocode.renderElement` can accept an option as the last argument,
such as

```js
pseudocode.renderElement(document.getElementById("quicksort").
{ lineNumber: true });
```

The following options are currently supported:

* `indentSize`: The indent size of inside a control block, e.g. if, for,
etc. The unit must be in 'em'.
Expand All @@ -249,7 +252,8 @@ an option as the last argument.
showned.
* `captionCount`: Reset the caption counter to this number.

The values of the options, if not reset specifically, are:
The default values of these options are:

```js
var DEFAULT_OPTIONS = {
indentSize: '1.2em',
Expand Down
30 changes: 19 additions & 11 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,24 @@ <h1>
</a>
</p>

<ul>
<li>
<a onclick="load('katex-samples.html')">
<strong>KaTeX</strong> Samples
</a>
</li>
<li>
<a onclick="load('mathjax-v2-samples.html')">
<strong>MathJax 2</strong> Samples
</a>
</li>
<li>
<a onclick="load('mathjax-v3-samples.html')">
<strong>MathJax 3</strong> Samples
</a>
</li>
</ul>

<ul>
<li>
<a href="https://github.com/SaswatPadhi/pseudocode.js/releases">
Expand All @@ -110,12 +128,6 @@ <h1>
</a>
</li>
</ul>

<br><br><br>

&raquo; <a onclick="load('katex-samples.html')">View KaTeX Samples</a> <br>
&raquo; <a onclick="load('mathjax-v2-samples.html')">View MathJax 2.0 Samples</a> <br>
&raquo; <a onclick="load('mathjax-v3-samples.html')">View MathJax 3.0 Samples</a> <br>
</header>

<section id='samples' style='display: none; padding-bottom: 0;'>
Expand Down Expand Up @@ -221,11 +233,7 @@ <h3>Usage</h3>
</p>

<pre><code class="language-html">&lt;script&gt;
var elem = document.getElementById("hello-world-code");
var options = {
lineNumber: true
};
pseudocode.render(elem.textContent, elem.parentNode, options);
pseudocode.renderElement(document.getElementById("hello-world-code"));
&lt;/script&gt;</code></pre>

<p>
Expand Down
32 changes: 16 additions & 16 deletions docs/katex-samples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,21 +148,21 @@
\end{algorithm}
</pre>
<script>
var basicsEl = document.getElementById("test-basics");
pseudocode.render(basicsEl.textContent, basicsEl.parentNode, {
lineNumber: false,
noEnd: true
});
var codesEl = document.getElementById("test-codes");
pseudocode.render(codesEl.textContent, codesEl.parentNode, {
lineNumber: false,
noEnd: false
});
var examplesEl = document.getElementById("test-examples");
pseudocode.render(examplesEl.textContent, examplesEl.parentNode, {
lineNumber: true,
noEnd: false
});
pseudocode.renderElement(document.getElementById("test-basics"),
{
lineNumber: false,
noEnd: true
});
pseudocode.renderElement(document.getElementById("test-codes"),
{
lineNumber: false,
noEnd: false
});
pseudocode.renderElement(document.getElementById("test-examples"),
{
lineNumber: true,
noEnd: false
});
</script>
</body>
</html>
</html>
32 changes: 16 additions & 16 deletions docs/mathjax-v2-samples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,21 +158,21 @@
\end{algorithm}
</pre>
<script>
var basicsEl = document.getElementById("test-basics");
pseudocode.render(basicsEl.textContent, basicsEl.parentNode, {
lineNumber: false,
noEnd: true
});
var codesEl = document.getElementById("test-codes");
pseudocode.render(codesEl.textContent, codesEl.parentNode, {
lineNumber: false,
noEnd: false
});
var examplesEl = document.getElementById("test-examples");
pseudocode.render(examplesEl.textContent, examplesEl.parentNode, {
lineNumber: true,
noEnd: false
});
pseudocode.renderElement(document.getElementById("test-basics"),
{
lineNumber: false,
noEnd: true
});
pseudocode.renderElement(document.getElementById("test-codes"),
{
lineNumber: false,
noEnd: false
});
pseudocode.renderElement(document.getElementById("test-examples"),
{
lineNumber: true,
noEnd: false
});
</script>
</body>
</html>
</html>
32 changes: 16 additions & 16 deletions docs/mathjax-v3-samples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,21 +158,21 @@
\end{algorithm}
</pre>
<script>
var basicsEl = document.getElementById("test-basics");
pseudocode.render(basicsEl.textContent, basicsEl.parentNode, {
lineNumber: false,
noEnd: true
});
var codesEl = document.getElementById("test-codes");
pseudocode.render(codesEl.textContent, codesEl.parentNode, {
lineNumber: false,
noEnd: false
});
var examplesEl = document.getElementById("test-examples");
pseudocode.render(examplesEl.textContent, examplesEl.parentNode, {
lineNumber: true,
noEnd: false
});
pseudocode.renderElement(document.getElementById("test-basics"),
{
lineNumber: false,
noEnd: true
});
pseudocode.renderElement(document.getElementById("test-codes"),
{
lineNumber: false,
noEnd: false
});
pseudocode.renderElement(document.getElementById("test-examples"),
{
lineNumber: true,
noEnd: false
});
</script>
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion docs/pseudocode.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/stylesheets/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ header li {
}

header ul a {
line-height:1;
line-height:1.15;
font-size:11px;
color:#999;
display:block;
Expand Down
6 changes: 5 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "pseudocode",
"version": "2.0.0",
"version": "2.1.0",
"author": {
"name": "Saswat Padhi",
"email": "saswat.sourav@gmail.com",
Expand All @@ -23,5 +23,9 @@
"clean-css-cli": "^4.0.0",
"eslint": "^6.6.0"
},
"optionalDependencies": {
"mathjax": "^2.7.5",
"katex": "^0.8.0"
},
"license": "MIT"
}
59 changes: 47 additions & 12 deletions pseudocode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,61 @@ var Lexer = require('./src/Lexer');
var Parser = require('./src/Parser');
var Renderer = require('./src/Renderer');

function makeRenderer(data, options) {
var lexer = new Lexer(data);
var parser = new Parser(lexer);
return new Renderer(parser, options);
}

function mathjaxTypeset(elem) {
try {
// MathJax 3.x
MathJax.typeset([elem]);
}
catch (_) {
// MathJax 2.x
MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem]);
}
}

module.exports = {
ParseError: ParseError,
renderToString: function(input, options) {
render: function(input, baseDomEle, options) {
if (input === null || input === undefined)
throw 'input cannot be empty';

var lexer = new Lexer(input);
var parser = new Parser(lexer);
var renderer = new Renderer(parser, options);
return renderer.toMarkup();
var renderer = makeRenderer(input, options);
var elem = renderer.toDOM();
if (baseDomEle) baseDomEle.appendChild(elem);

if (renderer.backend.name === 'mathjax') {
mathjaxTypeset(elem);
}
return elem;
},
render: function(input, baseDomEle, options) {
renderToString: function(input, options) {
if (input === null || input === undefined)
throw 'input cannot be empty';

var lexer = new Lexer(input);
var parser = new Parser(lexer);
var renderer = new Renderer(parser, options);
var ele = renderer.toDOM();
if (baseDomEle) baseDomEle.appendChild(ele);
return ele;
var renderer = makeRenderer(input, options);
if (renderer.backend.name === 'mathjax') {
console.warn('Using MathJax backend -- math may not be rendered.');
}

return renderer.toMarkup();
},
renderElement: function(elem, options) {
if (!(elem instanceof Element))
throw 'a DOM element is required';

elem.style.display = 'none';

var renderer = makeRenderer(elem.textContent, options);
var newElem = renderer.toDOM();
elem.replaceWith(newElem);

if (renderer.backend.name === 'mathjax') {
mathjaxTypeset(newElem);
}
},
};
Loading

0 comments on commit 8bbbd69

Please sign in to comment.