-
Notifications
You must be signed in to change notification settings - Fork 22
Advanced Usages
This simple TeXZilla-show-source.js script will show the TeX source when the user double clicks on a MathML equation. See this example. Note that you really don't need the TeXZilla parser to do that and can only copy the getTeXSourceInternal function (see https://github.com/fred-wang/TeXZilla/blob/master/TeXZilla.jison). Firefox users might want to consider installing the MathML-copy add-on.
This simple TeXZilla-parse.js script will convert the TeX content of all the <span> and <div> elements with class="tex" into inline and display MathML equations. To use it, just do
<script type="text/javascript" src="TeXZilla-min.js"/>
<script type="text/javascript" src="TeXZilla-parse.js"/>
...
... <div class="tex">∑_{n=1}^{+∞} \frac{1}{n^2} = \frac{π^2}{6}</div> ...
... <span class="tex">\frac{\sqrt{x_1}}{3} + y^2</span>...
Note that as any normal HTML document, the special characters < and & must be escaped (< and &). See this example.
Alternatively, it is possible to use filterElement to parse TeX expressions in a given DOM element like <p>blah blah $x^2$ blah blah $$x^2$$</p>. See this example.
In any cases, appending many new DOM subtrees is a slow operation and the MathML won't appear in search results or blog feeds so it is strongly recommended to process the static TeX strings before publishing your Web page (either locally or server-side) using the command line interface and to reduce as much as possible the number of elements to process client-side. Also, when the TeX string may be written by your visitors (e.g. blog comments) you should, for security reasons, enable the safe mode.
Note: This is a proof-of-concept.
This example shows how to implement a Web Components Custom Element <x-tex> that uses TeXZilla to automatically convert expressions like
<x-tex>x^2 + y</x-tex>
into MathML. You can set display and dir attributes on that element via Javascript and they will be transmitted on the internal MathML node. The element has a source member with the internal TeX source that you can set with e.g. xTeXElement.source = "\\frac{a}{b}";.
Note that the example uses experimental technologies (native Web Components and Shadow DOM support). Alternatively, the X-Tag Polylib can be used to implement such an x-tex tag.
You can use the command line interface to use TeXZilla as a Web Server. For example
$ slimerjs TeXZilla.js webserver 7777
Web server started on http://localhost:7777
will run a server on port 7777. The commonJS TeXZilla.js webserver command accepts two more optional boolean arguments (safe, itexId) to specify advanced parsing modes. This server will listen HTTP requests and send replies in JSON format. You can send POST request with parameters in JSON data
$ curl -H "Content-Type: application/json" -X POST -d '{"tex":"x+y","display":"true"}' http://localhost:7777
{"tex":"x+y","mathml":"<math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\"><semantics><mrow><mi>x</mi><mo>+</mo><mi>y</mi></mrow><annotation encoding=\"TeX\">x+y</annotation></semantics></math>","exception":null}
or GET request with parameters in the query strings:
$ curl "http://localhost:7777/?tex=x+y&rtl=true"
{"tex":"x+y","mathml":"<math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\" dir=\"rtl\"><semantics><mrow><mi>x</mi><mo>+</mo><mi>y</mi></mrow><annotation encoding=\"TeX\">x+y</annotation></semantics></math>","exception":null}
The interpretation of parameters is the same as for the toMathMLString. The JSON reply will contain a tex member with the original source, a mathml member with the MathML output returned by toMathMLString (if no exceptions are raised) and an exception member with the exception raised (if any).
You can use the command line interface to use TeXZilla as a stream filter. This is typically used to convert a HTML document with embedded TeX fragments into a HTML document with MathML equations with a command like cat foo-tex.html | phantomjs TeXZilla.js streamfilter > foo-mathml.html. The commonJS TeXZilla.js streamfilter command accepts two more optional boolean arguments (safe, itexId) to specify advanced parsing modes. For example, if you wish to mimic itex2MML behavior:
$ echo "$ sin^2 x + cos^2 x = 1 $" | itex2MML
<math xmlns='http://www.w3.org/1998/Math/MathML' display='inline'><semantics><mrow><msup><mi>sin</mi> <mn>2</mn></msup><mi>x</mi><mo>+</mo><msup><mi>cos</mi> <mn>2</mn></msup><mi>x</mi><mo>=</mo><mn>1</mn></mrow><annotation encoding='application/x-tex'> sin^2 x + cos^2 x = 1 </annotation></semantics></math>
$ echo "$ sin^2 x + cos^2 x = 1 $" | phantomjs TeXZilla.js streamfilter false true
<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>sin</mi><mn>2</mn></msup><mi>x</mi><mo>+</mo><msup><mi>cos</mi><mn>2</mn></msup><mi>x</mi><mo>=</mo><mn>1</mn></mrow><annotation encoding="TeX"> sin^2 x + cos^2 x = 1 </annotation></semantics></math>
Here is a more complex pipe where programs like echo, markdown, TeXZilla and sed are used to generate a HTML document:
echo "This is a **Markdown** document with a *math formula*: $ z = \\sqrt{x^2 + y^2} $" | markdown | nodejs TeXZilla.js streamfilter | sed '1s/^/\n<!-- HTML5 document -->\n/'
<!-- HTML5 document -->
<p>This is a <strong>Markdown</strong> document with a <em>math formula</em>: <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>z</mi><mo>=</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><msup><mi>y</mi><mn>2</mn></msup></mrow></msqrt></mrow><annotation encoding="TeX"> z = \sqrt{x^2 + y^2} </annotation></semantics></math></p>
It is possible to execute TeXZilla in your Java programs, using the ScriptEngineManager and the Javascript engines shipped by default (Rhino for Java 6 and 7; Nashorn since Java 8). For example
ScriptEngineManager scriptEngineManager =
new ScriptEngineManager();
ScriptEngine jsEngine =
scriptEngineManager.getEngineByName("nashorn");
jsEngine.eval(new FileReader("/path/to/TeXZilla.js"));
Object TeXZilla = jsEngine.get("TeXZilla");
Invocable invocable = (Invocable) jsEngine;
String output =
invocable.invokeMethod(TeXZilla,
"toMathMLString", "\\sqrt{x^2 - y}");
See this Java program for a more complete example.
You can use one of the Python interface to a Javascript interpreter to run TeXZilla. For example, here is here is a sequence of commands from the Python interpreter using the SpiderMonkey bridge module:
>>> import spidermonkey
>>> rt = spidermonkey.Runtime()
>>> cx = rt.new_context()
>>> f = open("TeXZilla.js")
>>> cx.execute(f.read())
u'use strict'
>>> f.close()
>>> TeXZilla = cx.execute("TeXZilla")
>>> print(TeXZilla.toMathMLString("\\sqrt{x^2-y}"))
<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mi>y</mi></mrow></msqrt><annotation encoding="TeX">\sqrt{x^2-y}</annotation></semantics></math>
See this Python program for a more complete example.
Perl has various modules providing Javascript interfaces. However, the JE module (Pure-Perl ECMAScript) seems too slow to execute TeXZilla so you'd better use an interface to a Javascript engines like SpiderMonkey or V8. See this Perl program for an example using the Javascript::V8 module. Note that there is a Perl interface to itex2MML, which should provide support equivalent to TeXZilla.
Ruby has various modules providing Javascript interfaces. See this Ruby program for an example using therubyracer (V8). Note that there are Ruby bindings for itex2MML, which should provide support equivalent to TeXZilla.
The toImage function let you dynamically generate <img> elements that can be embedded in a 2D or WebGL canvas. See the toImage.html and the toImageWebGL.html demos.
At the moment, only Gecko allows to embed SVG images with a <foreignObject> inside a canvas context. The image is then no longer "vectorial" so it is recommended to use large font-size in order to get decent rendering quality (the default is 64px and can be configured with the aSize parameter). Also, when used as a WebGL texture, it is preferable to have sizes that are powers of two that is to set the aRoundToPowerOfTwo parameter to true. Note that you can get the final dimension of the images using the standard width and height attributes of the <img> element and that the mathematical equation is automatically centered inside its SVG container.