forked from mathjax/MathJax-demos-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
v2-color.html
64 lines (62 loc) · 1.77 KB
/
v2-color.html
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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width">
<title>MathJax v3 with v2 \color macro</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
autoload: {
color: [], // don't autoload the color extension
colorv2: ['color'] // autoload v2 color extension
}
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
<p>
The MathJax c2 <code>\color</code> macro takes two arguments, the
color and the math to be colored, where the v3 version follows the
LaTeX approach, where it has one argument (the color) and switches
the color for the rest of the expression.
</p>
<p>
The expression <code>$\color{red}{Red}\ Black$</code> is rendered:
</p>
<table style="margin-left: 2em">
<tr><td align="center">In v2</td><td style="width:2em"></td><td align="center">In v3</td></tr>
<tr><td>$\color{red}{Red}\ Black$</td><td>$\require{color}$</td><td>$\color{red}{Red}\ Black$</td></tr>
</table>
<p>
To get the same effect in v3, use <code>${\color{red} Red}\ Black$</code> instead:
</p>
<p>
<div style="margin-left: 2em">
${\color{red} Red}\ Black$</code>
</div>
</p>
<p>
Or you can use the configuration
<pre style="margin-left:2em">
<script>
MathJax = {
tex: {
autoload: {
color: [], // don't autoload the color extension
colorv2: ['color'] // autoload v2 color instead
}
}
};
</script>
</pre>
<p>
before the script that loads MathJax in order to retain the original
v2 <code>\color</code> macro.
</p>
</body>
</html>