1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
.. _html-snippets:
************************
Describing HTML snippets
************************
A number of MathJax configuration options allow you to specify an HTML
snippet using a JavaScript object. This lets you include HTML in your
configuration files even though they are not HTML files themselves.
The format is fairly simple, but flexible enough to let you represent
complicated HTML trees.
An HTML snippet is an array consisting of a series of elements that format
the HTML tree. Those elements are one of two things: either a string,
which represents text to be included in the snippet, or an array,
which represents an HTML tag to be included. In the latter case, the
array consists of three items: a string that is the tag name (e.g.,
"img"), an optional object that gives attributes for the tag (as
described below), and an optional HTML snippet array that gives the
contents of the tag.
When attributes are provided, they are given as `name:value` pairs,
with the `name` giving the attribute name, and `value` giving its
value. For example
.. code-block:: javascript
[["img",{src:"/images/mypic.jpg"}]]
represents an HTML snippet that includes one element: an ``<img>`` tag
with ``src`` set to ``/images/mypic.jpg``. That is, this is
equivalent to
.. code-block:: html
<img src="/images/mypic.jpg">
Note that the snippet has two sets of square brackets. The outermost
one is for the array that holds the snippet, and the innermost set is
because the first (and only) element in the snippet is a tag, not
text. Note that the code ``["img",{src:"/images/mypic.jpg"}]``
is invalid as an HTML snippet. It would represent a snippet that
starts with "img" as text in the snippet (not a tag), but the second
item is neither a string nor an array, and so is illegal. This is a
common mistake that should be avoided.
A more complex example is the following:
.. code-block:: javascript
[
"Please read the ",
["a",{href:"instructions.html"},["instructions"]],
" carefully before proceeding"
]
which is equivalent to
.. code-block:: html
please read the <a href="instructions.html">instructions</a> carefully
before proceeding.
A final example shows how to set style attributes on an object:
.. code-block:: javascript
[["span",
{
id:"mySpan",
style: {color:"red", "font-weight":"bold"}
},
[" This is bold text shown in red "]
]]
which is equivalent to
.. code-block:: html
<span id="mySpan" style="color: red; font-weight: bold;">
This is bold text shown in red
</span>
Since HTML snippets contain text that is displayed to users, it may be
important to localize those strings to be in the language selected by
the user. See the :ref:`Localization Strings <localization-strings>`
documentation for details of how to accomplish that.
|
