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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Describing HTML snippets — MathJax v1.1 documentation</title>
<link rel="stylesheet" href="_static/mj.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '',
VERSION: '1.1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<!--<script type="text/javascript" src="../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
<link rel="top" title="MathJax v1.1 documentation" href="index.html" />
<link rel="next" title="CSS Style Objects" href="CSS-styles.html" />
<link rel="prev" title="The MathJax Object-Oriented Programming Model" href="api/object.html" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="CSS-styles.html" title="CSS Style Objects"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="api/object.html" title="The MathJax Object-Oriented Programming Model"
accesskey="P">previous</a> |</li>
<li><a href="index.html">MathJax v1.1 documentation</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="describing-html-snippets">
<span id="html-snippets"></span><h1>Describing HTML snippets<a class="headerlink" href="#describing-html-snippets" title="Permalink to this headline">ΒΆ</a></h1>
<p>A number of MathJax configuration options allow you to specify an HTML
snippet using a JavaScript object. This lets you include HTML in your
configutation files even though they are not HTML files themselves.
The format is fairly simple, but flexible enough to let you represent
complicated HTML trees.</p>
<p>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.</p>
<p>When attributes are provided, they are given as <cite>name:value</cite> pairs,
with the <cite>name</cite> giving the attribute name, and <cite>value</cite> giving its
value. For example</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="p">[[</span><span class="s2">"img"</span><span class="p">,{</span><span class="nx">src</span><span class="o">:</span><span class="s2">"/images/mypic.jpg"</span><span class="p">}]]</span>
</pre></div>
</div>
<p>represents an HTML snippet that includes one element: an <tt class="docutils literal"><span class="pre"><img></span></tt> tag
with <tt class="docutils literal"><span class="pre">src</span></tt> set to <tt class="docutils literal"><span class="pre">/images/mypic.jpg</span></tt>. That is, this is
equivalent to</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt"><img</span> <span class="na">src=</span><span class="s">"/images/mypic.jpg"</span><span class="nt">></span>
</pre></div>
</div>
<p>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 <tt class="docutils literal"><span class="pre">["img",{src:"/images/mypic.jpg"}]</span></tt>
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.</p>
<p>A more complex example is the following:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="p">[</span>
<span class="s2">"Please read the "</span><span class="p">,</span>
<span class="p">[</span><span class="s2">"a"</span><span class="p">,{</span><span class="nx">href</span><span class="o">:</span><span class="s2">"instructions.html"</span><span class="p">},[</span><span class="s2">"instructions"</span><span class="p">]],</span>
<span class="s2">" carefully before proceeding"</span>
<span class="p">]</span>
</pre></div>
</div>
<p>which is equivalent to</p>
<div class="highlight-html"><div class="highlight"><pre>please read the <span class="nt"><a</span> <span class="na">href=</span><span class="s">"instructions.html"</span><span class="nt">></span>instructions<span class="nt"></a></span> carefully
before proceeding.
</pre></div>
</div>
<p>A final example shows how to set style attributes on an object:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="p">[[</span><span class="s2">"span"</span><span class="p">,</span>
<span class="p">{</span>
<span class="nx">id</span><span class="o">:</span><span class="s2">"mySpan"</span><span class="p">,</span>
<span class="nx">style</span><span class="o">:</span> <span class="p">{</span><span class="nx">color</span><span class="o">:</span><span class="s2">"red"</span><span class="p">,</span> <span class="s2">"font-weight"</span><span class="o">:</span><span class="s2">"bold"</span><span class="p">}</span>
<span class="p">},</span>
<span class="p">[</span><span class="s2">" This is bold text shown in red "</span><span class="p">]</span>
<span class="p">]]</span>
</pre></div>
</div>
<p>which is equivalent to</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt"><span</span> <span class="na">id=</span><span class="s">"mySpan"</span> <span class="na">style=</span><span class="s">"color: red; font-weight: bold;"</span><span class="nt">></span>
This is bold text shown in red
<span class="nt"></span></span>
</pre></div>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<h4>Previous topic</h4>
<p class="topless"><a href="api/object.html"
title="previous chapter">The MathJax Object-Oriented Programming Model</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="CSS-styles.html"
title="next chapter">CSS Style Objects</a></p>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" size="18" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="CSS-styles.html" title="CSS Style Objects"
>next</a> |</li>
<li class="right" >
<a href="api/object.html" title="The MathJax Object-Oriented Programming Model"
>previous</a> |</li>
<li><a href="index.html">MathJax v1.1 documentation</a> »</li>
</ul>
</div>
<div class="footer">
© Copyright 2011 Design Science.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
</div>
</body>
</html>
|
