|
1 | | -# MathJax in JSDOM |
| 1 | +# MathJax Using LINKEDOM |
| 2 | + |
| 3 | +This example shows how to run MathJax within a |
| 4 | +[LINKEDOM](https://github.com/WebReflection/linkedom#readme) instance. |
| 5 | +Although MathJax provides a lightweight DOM implementation (called |
| 6 | +LiteDOM) for use in node applications, it is limited in its scope, and |
| 7 | +you may want to work within a more full-featured DOM. For example, if |
| 8 | +you plan to manipulate the DOM as though you were using a browser, it |
| 9 | +may be more convenient to to use LINKEDOM than LiteDOM. Note, |
| 10 | +however, that because LINKEDOM implements a lot more of the DOM |
| 11 | +functionality, it is slower and larger. |
| 12 | + |
| 13 | +## The Examples |
| 14 | + |
| 15 | +There are four example files here, `typeset-simple`, |
| 16 | +`typeset-component`, `typeset-direct` and `typeset-mixed` that each |
| 17 | +implement an general typesetting tool in one of the four main ways of |
| 18 | +using MathJax in node applications. These correspond to the versions |
| 19 | +of `typeset` in the [`mjs`](../mjs) subdirectories, and each can be |
| 20 | +used to typeset one or more expressions or a file using any of the |
| 21 | +three input formats that MathJax supports (TeX/LaTeX, MathML, or |
| 22 | +AsciiMath), and any of its output formats (CHTML, SVG, or MathML). |
| 23 | + |
| 24 | +These work essentially the same as the corresponding mjs examples, but |
| 25 | +they load the `adaptors/linkedom` adaptor rather than the |
| 26 | +`adaptors/liteDOM` adaptor. The linkedom adaptor requires that you load |
| 27 | +the LINKEDOM node module and pass that to the adaptor when it is created. |
| 28 | +These details are encapsulated in the [`Linkedom.js`](Linkedom.js) utility |
| 29 | +file. |
2 | 30 |
|
3 | | -This example shows how to run MathJax within a [JSDOM](https://github.com/jsdom/jsdom) instance. Although MathJax provides a lightweight DOM implementation (called LiteDOM) for use in node applications, it is limited in its scope, and you may want to work within a more full-featured DOM. For example, if you plan to manipulate the DOM as though you were using a browser, it may be more convenient to to use JSDOM than LiteDOM. Note, however, that because JSDOM implements a lot more of the DOM functionality, it is slower and larger. |
4 | | - |
5 | | -## The Examples (Simple Approach) |
6 | | - |
7 | | -The `tex2chtml` and `tex2chtml-page` examples in this directory are nearly identical to the ones in the [`simple`](../simple) directory, with the exception that they use the `jsdomAdaptor` rather than the `liteAdaptor`. The key changes are to replace the `loader` block of the configuration to |
8 | | - |
9 | | -``` javascript |
10 | | - loader: { |
11 | | - paths: {jsdom: `${__dirname}/adaptor`}, |
12 | | - source: (argv.dist ? {} : require('mathjax-full/components/src/source.js').source), |
13 | | - load: ['[jsdom]/adaptor' + (argv.dist ? '.min.js' : ''), 'tex-chtml'] |
14 | | - }, |
15 | | -``` |
16 | | - |
17 | | -which sets up a `[jsdom]` path prefix, and loads the `jsdomAdaptor` from that location, and the addition of |
18 | | - |
19 | | -``` javascript |
20 | | - JSDOM: require('jsdom').JSDOM, |
21 | | -``` |
22 | | - |
23 | | -to the configuration, since the `jsdomAdaptor` needs access to that. |
24 | | - |
25 | | - |
26 | | -## The Examples (Direct Approach) |
| 31 | +## Installation |
27 | 32 |
|
28 | | -The `tex2svg` and `tex2svg-page` examples in this directory are nearly identical to the ones in the [`direct`](../direct) directory, with the exception that they use the `jsdomAdaptor` rather than the `liteAdaptor`. The key changes are using |
| 33 | +In order to try out these examples you must install its dependencies. |
| 34 | +Since the code relies on LINKEDOM, that needs to be installed, so this |
| 35 | +directory contains a separate `package.json` file, and you should do |
| 36 | +the following: |
29 | 37 |
|
30 | | -``` javascript |
31 | | -const {jsdomAdaptor} = require('mathjax-full/js/adaptors/jsdomAdaptor.js'); |
| 38 | +``` bash |
| 39 | +cd MathJax-demos-node/linkedom |
| 40 | +npm install |
32 | 41 | ``` |
33 | 42 |
|
34 | | -instead of the corresponding `liteAdaptor` require, the addition of |
| 43 | +To run the examples, use |
35 | 44 |
|
36 | | -``` javascript |
37 | | -const {JSDOM} = require('jsdom'); |
38 | 45 | ``` |
39 | | - |
40 | | -in order to load the JSDOM library, and |
41 | | - |
42 | | -``` javascript |
43 | | -const adaptor = jsdomAdaptor(JSDOM); |
| 46 | +node <example-name> -i <format> -o <format> [options] [expressions...] |
44 | 47 | ``` |
45 | 48 |
|
46 | | -rather than the corresponding `liteAdaptor()` call. The rest of the code is identical to the direct approach with the lite adaptor. |
| 49 | +where `<example-name>` is the name of the example file, `<format>` is |
| 50 | +one of the input or output formats, and `expressions` are zero or more |
| 51 | +expressions. If no expressions are given, then they are taken from |
| 52 | +standard input. Use |
47 | 53 |
|
48 | | -Note that there is no JSDOM component, so you can't use the component-based approaches to MathJax with JSDOM. It would be possible to construct a custom component for the JSDOM adaptor, if you needed to use the components approach. |
49 | | - |
50 | | - |
51 | | - |
52 | | -## Installation |
53 | | - |
54 | | -In order to try out this example you must install its dependencies. Since the code relies on JSDOM, that needs to be installed, so this directory contains a separate `package.json` file, and you should do the following: |
55 | | - |
56 | | -``` bash |
57 | | -cd MathJax-demos-node/jsdom |
58 | | -npm install --production |
59 | 54 | ``` |
60 | | - |
61 | | -(If you wish to rebuild the jsdom adaptor component, then leave off the `--production` so that the developer dependencies will be isntalled.) |
62 | | - |
63 | | -The example files should be executables that you can run. On non-unix systems, you may need to call |
64 | | - |
65 | | -``` bash |
66 | | -node -r esm <example-name> |
| 55 | +node <example-name> --help |
67 | 56 | ``` |
68 | 57 |
|
69 | | -where `<example-name>` is the name of the example file. Some examples take an argument (like a TeX string) that follows the `<example-name>` above. |
| 58 | +for details about other options. |
70 | 59 |
|
71 | | -To rebuild the JSDOM adaptor component (in the [`adaptor`](adaptor) directory), do the following: |
72 | | - |
73 | | -``` bash |
74 | | -cd MathJax-demos-node/jsdom/adaptor |
75 | | -../node_modules/mathjax-full/components/bin/pack |
76 | | -``` |
| 60 | +The `adaptors/linkedom` adaptor is now standard in v4, so you don't need |
| 61 | +to built is by hand, as you did in v3. |
0 commit comments