I’m recently enhancing the $\rm \LaTeX$ code for inline limits. For the reason of doing so, you may refer to the external link of my recent linklog Inline Limit Rendering.
In the previous post in this series written over one year ago, I have included a code block which enables deferred MathJax loading. However, I manually added this chuck of code in the HTML file generated by kramdown, which created the problem described in the next subsection A problem with Vim’s folding arised.
Firstly, save the code for loading MathJax in the previous
post in this series in a separate file ~/script.html
. Then
use the following commands within Vim in order to avoid leaving the
current buffer and to improve efficiency.
9,$w! ~/temp.mkd
!kramdown ~/temp.mkd > ~/temp.html
!cat ~/{temp,script}.html > ~/test.html
The digit 9
in the first command isn’t exact. Change it to any
line number that separates the yaml front matter from the
post content.
To provide a good-looking template of basic linear programs for users of Mathematics Stack Exchange.
1
2
3
4
5
6
7
\begin{array}{cccll}
\max &z=&x_1&+x_2 & <br />
\text{s.t.}& & & \phantom{+}x_2 + s_1 &= 8 <br />
& & -x_1&+x_2 - s_2&=-4 <br />
& & x_1&+x_2+s_3&= 12 <br />
& & & s_1,s_2,s_3 &\ge 0
\end{array}
If you want a prettier template, you may see
this $\rm TeX$–$\rm \LaTeX$ Stack Exchange question. I
tried added @{}
in the first argument of the array
environment to
eliminate the excessive inter-column space—this works great in $\rm
\LaTeX$. However, neither @{}
nor \multicolumn{4}{l}{...}
is
processed by MathJax.
I use Solarized theme with light background. IMHO, it is less tiring to look at a light background. I’ve chosen pink as the text colour.
Apart from technical stuff, I often post math containing calligraphic font, for example
I used Mozilla Firefox, and I didn’t see problem on the display of
\mathcal
.
Three months ago, I wrote something about Zorn’s Lemma and Hausdorff spaces. In the post Normal Compact $T_2$ Spaces, I observed that the math display was abnormal. Due to homework and exams, I delayed the investigation into this technical problem.
Normally, the foreground colour of the math expression is the same as that of normal inline text. In the above figure, "$T_2$" is in pink. However, $U_y, V_y$ aren’t.
It is normal for me to inspect the HTML elements.
The above math expression is in black rather than pink because it is rendered as a PNG image.
I confirmed this by looking at the list of loaded resources.
I tried opening the blog article in Mozilla Firefox, and I didn’t see any problem.
Based on the above observations, I suspected that the presence of a
calligraphic font triggered this fallback of fonts. In order to test
this, I did an experiment on my local MathJax test page: I had a math
expression containing \mathcal
and one without. I put them in
different order, and observed the difference in the loaded PNG.
Only the curly ‘C’ is loaded as PNG, while the rest aren’t.
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Don't delete!</title>
</head>
<body>
<div class="myeqn">
\begin{align*}
&\quad\; \abs{x + i \sqrt{1 - x^2} \cos{\theta}}\\
=& \sqrt{x^2 + (1 - x^2) \cos^2{\theta}}\\
\le& \sqrt{x^2 + (1 - x^2)}\\
=& 1.
\end{align*}
</div>
<!-- Don't need to go to MathJax CDN Sample -->
<p>$\mathcal{C}$</p>
<script type="text/javascript">
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded'
|| this.readyState == 'complete') ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript("https://cdn.mathjax.org/mathjax/latest/MathJax.js?" +
"config=TeX-AMS-MML_HTMLorMML" +
",https://vincenttam.github.io/javascripts/MathJaxLocal.js",
function(){});
})();
</script>
</body>
</html>
Everything (after the curly ‘C’) are loaded as PNG.
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Don't delete!</title>
</head>
<body>
<!-- Don't need to go to MathJax CDN Sample -->
<p>$\mathcal{C}$</p>
<div class="myeqn">
\begin{align*}
&\quad\; \abs{x + i \sqrt{1 - x^2} \cos{\theta}}\\
=& \sqrt{x^2 + (1 - x^2) \cos^2{\theta}}\\
\le& \sqrt{x^2 + (1 - x^2)}\\
=& 1.
\end{align*}
</div>
<script type="text/javascript">
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded'
|| this.readyState == 'complete') ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript("https://cdn.mathjax.org/mathjax/latest/MathJax.js?" +
"config=TeX-AMS-MML_HTMLorMML" +
",https://vincenttam.github.io/javascripts/MathJaxLocal.js",
function(){});
})();
</script>
</body>
</html>
Therefore, my claim is verified. Unluckily, I failed to find any solution to this problem on Google.
I’ve better solve math problems instead of technical ones since math is always true.
I started writing this post on Christmas Eve, and I finished it at Christmas.
]]>In my opinion, the default display of the $\rm \LaTeX$ command for $\Re z$ and $\Im z$ don’t look good.
I want to reset the \Im
command in my local MathJax configuration
file source/javascripts/MathJaxLocal.js
. I used a script inside the
<body>
tag to load my local MathJax configurations from GitHub.1
If I want to test the configurations, then I’ll have to push my
changes to GitHub before I can see the effect and figure out the
errors — this is incredibly slow and inefficient.
How can I locally debug my MathJax configurations?
To locally test my MathJax configurations, I put another <script>
tag containing the local configurations before the <script>
that
loads MathJax.js
.
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
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$'],['\\[','\\]']],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
messageStyle: "none",
"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] },
TeX: {
equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js","AMScd.js"],
TagSide: "left",
Macros: {
field: ['\\mathbb{#1}', 1],
C: ['\\field{C}'],
F: ['\\field{F}'],
N: ['\\field{N}'],
Q: ['\\field{Q}'],
R: ['\\field{R}'],
Z: ['\\field{Z}'],</script></p>
<pre><code> zeros: ['\\mathbf{0}'],
ud: ['\\,\\mathrm{d}'],
vect:['\\boldsymbol{\\mathbf{#1}}',1],
abs: ['\\lvert#1\\rvert', 1],
abslr:['\\left\\lvert#1\\right\\rvert', 1],
norm: ['\\lVert#1\\rVert', 1],
normlr: ['\\left\\lVert#1\\right\\rVert', 1],
lcm: ['\\mathop{\\mathrm{lcm}}'],
interior: ['\\mathop{\\mathrm{int}}'],
exterior: ['\\mathop{\\mathrm{ext}}'],
volume: ['\\mathop{\\mathrm{vol}}'],
E: ['{\\rm I\\kern-.3em E}'],
Var: ['\\mathop{\\mathrm{Var}}'],
Cov: ['\\mathop{\\mathrm{Cov}}'],
Binom: ['\\mathop{\\mathrm{Binom}}'],
Exp: ['\\mathop{\\mathrm{Exp}}'],
Poi: ['\\mathop{\\mathrm{Poi}}'],
GL: ['\\mathrm{GL}'],
SL: ['\\mathrm{SL}'],
Aut: ['\\mathrm{Aut}'],
id: ['\\mathrm{id}'],
// Test your code here
Re: ['\\mathop{\\mathrm{Re}}'],
Im: ['\\mathop{\\mathrm{Im}}'],
} } }); </script>
</code></pre>
<script type="text/javascript">
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript("https://cdn.mathjax.org/mathjax/latest/MathJax.js?" +
"config=TeX-AMS-MML_HTMLorMML", function(){});
})();
</script>
<p>
I think that rendering $\Re z$ and $\Im z$ with roman font is better.
Refer to my old post titled A Quick Markdown Syntax Error Detection for Writing MathJax Equations in Octopress Posts (3) for details. ↩
I often write math in this blog. After typing lots of characters,
syntax errors are inevitable, but no one wants them to be published.
Unluckily, the rake generate
command takes too long to run. In
order to find them out more quickly, I quickly went over the
Gemfile
of the repository for this blog, and saw that the Markdown
engine of Octopress is kramdown. Therefore, I used the command line
version of this Markdown parser to convert my Markdown source file to
an HTML document by a Vim Ex command.
:!kramdown % > %<.html
For this, I’ve written two posts describing the workflow of producing HTML web pages consisting of math expressions from Markdown source files using kramdown and MathJax.
In the first post in this series, I’ve made a list of steps
in Vim. However, jumping to other files is laborious. More
importantly, those steps involve browsing and copying of lines of
HTML code of the <head>
, which loads MathJax, in other HTML files.
This can seriously slow down the editing process. Unhappily, this
problem isn’t solved in the second post in this series.
There might be some option for the kramdown command line utility to use accept an HTML template files during the code conversion. However, I’m too lazy to search for them as I need to work on math.1
Remembering that I defered the loading of JavaScripts in order to boost the PageSpeed score of this site, I adpated the script to load MathJax instead of fancyBox in my draft markdown file.2
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
<script type="text/javascript">
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}</script></p>
<p>getScript(“https://cdn.mathjax.org/mathjax/latest/MathJax.js?” +
“config=TeX-AMS-MML_HTMLorMML” +
“,https://vincenttam.github.io/javascripts/MathJaxLocal.js”,
function(){});</p>
<p>})();
</script>
(Added on DEC 12TH, 2016)
This subsection can be omitted since appending the above code can be
done with cat
. Please see the next post in this series for
the detailed description.
By default, with the plugin vim-markdown
installed, the sections are
folded. Before I can continue editing at the end of the file, I
have to open the last fold, which contained more than 25 lines due to
the script enabling MathJax at the bottom. As a result, I have to
move back to the middle of the last fold by pressing k
for a while.
That annoys me. If the script is contained in a separate fold, it’s
better. Therefore, adding a blank line and then a line consisting of
three hyphens will fix this problem.
(Added on SEP 3RD, 2015)
Now I realised that kramdown will leave the trailing two backslashes
at each line inside <div>
tags in Markdown source files untouched.
In the second post in this series, we know that <div>
tag
prevents kramdown from converting the code inside the tag to HTML,
while in another old post about kramdown’s Markdown attributes,
one can revert the above behaviour by simply adding an attribute
markdown="1"
to the <div>
tag. These can be reflected in the
above test.
Usually, in math environments inside a $\rm \LaTeX$ document, double
backslashes \\
start a new line, and it’s the same in MathJax.
Typing two backslashes in the Markdown source down will suffice.
Unluckily, in the real Markdown source for Octopress posts, four
\
are needed.
For example, I have to think about multi-variable real-valued functions. ↩
Refer to my old post Octopress, PageSpeed, jQuery and fancyBox in Blog 1 for details. ↩