forked from kubetz/mathjax-bookmarklet
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
148 lines (135 loc) · 10.7 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>MathJax Bookmarklet</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
.bookmarklet {
display: inline-block;
text-align: center;
padding: 10px;
margin-left: auto;
margin-right: auto;
border: solid 1px #CCC;
-webkit-box-shadow: 1px 1px 5px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
-webkit-border-radius: 1.9em;
-moz-border-radius: 1.9em;
border-radius: 1.9em;
}
.prettyprint {
background-color: #fefbf3;
padding: 9px;
border: 1px solid rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.install {
margin-top: 5px;
text-align: center;
}
</style>
</head>
<body>
<a href="https://github.com/christianp/mathjax-bookmarklet"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<div class="container">
<div class="row">
<div class="page-header">
<h1>MathJax Bookmarklet</h1>
</div>
<div class="col-md-6">
<p>This bookmarklet renders Tex/LaTeX, MathML and AsciiMathML notation on pages dynamically using the <a href="http://www.mathjax.org/">MathJax</a> library.</p>
<p>LaTeX notation is rendered only when delimited by <code>$</code>, or display maths between <code>\[</code> and <code>\]</code>.</p>
<p>ASCIIMathML delimited by <code>`</code> is rendered as well.</p>
</div>
<div class="col-md-6 install">
<a href="javascript:(function(){function e(e){var t='.MathJax .mn {background: inherit;} .MathJax .mi {color: inherit;} .MathJax .mo {background: inherit;}';var a=e.createElement('style');a.innerText=t;try{a.textContent=t}catch(n){}e.getElementsByTagName('body')[0].appendChild(a);var i=e.createElement('script'),o;i.src='//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML.js';i.type='text/javascript';o='MathJax.Hub.Config({tex2jax:{inlineMath:[[\'$\',\'$\']],displayMath:[[\'\\\\[\',\'\\\\]\']],processEscapes:true}});MathJax.Hub.Startup.onload();';if(window.opera)i.innerHTML=o;else i.text=o;e.getElementsByTagName('head')[0].appendChild(i)}function t(t){if(t.MathJax===undefined){e(t.document)}else{t.MathJax.Hub.Queue(new t.Array('Typeset',t.MathJax.Hub))}}var a=document.getElementsByTagName('iframe'),n,i;t(window);for(n=0;n<a.length;n++){i=a[n].contentWindow||a[n].contentDocument;if(!i.document)i=i.parentNode;t(i)}})();">
<img class="bookmarklet" src="http://www.mathjax.org/wp-content/themes/mathjax/images/logo.gif" alt="MathJax">
</a>
<div><em>Drag&Drop to your bookmarks (right-click under older IE)!</em></div>
</div>
</div>
<div class="row" style="margin-top:2em">
<div >
<h2>Image replacement bookmarklet</h2>
</div>
<div class="col-md-6">
<p>I've also made a second bookmarklet to replace the blurry image-based maths used on WordPress.com blogs and Wikipedia with nice neat MathJax. This one does all the same things as the normal MathJax bookmarklet in addition to image replacement, but I thought it would be safer to have a second bookmarklet in case it causes problems on other sites.</p>
<p>Use this one instead of the one above when you're on a WordPress.com blog or Wikipedia.</p>
</div>
<div class="col-md-6 install">
<a href="javascript:(function(){function e(e){var t='.MathJax .mn {background: inherit;} .MathJax .mi {color: inherit;} .MathJax .mo {background: inherit;}';var a=e.createElement('style');a.innerText=t;try{a.textContent=t}catch(n){}e.getElementsByTagName('body')[0].appendChild(a);var r=e.createElement('script'),i;r.src='//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML.js';r.type='text/javascript';i='MathJax.Hub.Config({tex2jax:{inlineMath:[[\'$\',\'$\']],displayMath:[[\'\\\\[\',\'\\\\]\']],processEscapes:true}});MathJax.Hub.Startup.onload();';if(window.opera)r.innerHTML=i;else r.text=i;e.getElementsByTagName('head')[0].appendChild(r)}function t(t){function a(e){var a=t.document.createElement('span');a.setAttribute('class','MathJax_Preview');var n=t.document.createElement('script');n.setAttribute('type','math/tex');n.innerText=e.getAttribute('alt');var r=e.parentElement;r.replaceChild(n,e);a.appendChild(e);r.insertBefore(a,n)}var n=t.document.getElementsByClassName('latex');for(var r=0;r<n.length;r++){a(n[r])}if(t.MathJax===undefined){e(t.document)}else{t.MathJax.Hub.Queue(new t.Array('Typeset',t.MathJax.Hub))}}var a=document.getElementsByTagName('iframe'),n,r;t(window);for(n=0;n<a.length;n++){r=a[n].contentWindow||a[n].contentDocument;if(!r.document)r=r.parentNode;t(r)}})();">
<span class="bookmarklet">
<img src="wordpress-logo-hoz-rgb.png" alt="Replace image maths with MathJax">
<br/>
<img src="200px-Wikipedia-logo-v2-en.svg.png" alt="Replace image maths with MathJax">
</span>
</a>
<div><em>Drag&Drop to your bookmarks (right-click under older IE)!</em></div>
</div>
</div>
<div class="row">
<div>
<h2>Examples <small>Execute the bookmarklet and enjoy!</small></h2>
</div>
<div class="col-md-6">
<h3 >LaTeX Examples</h3>
<h4>The Cauchy-Schwarz Inequality</h4>
<div class="prettyprint">
$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$
</div>
<h4>Maxwell’s Equations</h4>
<div class="prettyprint">
$\begin{aligned}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}$
</div>
<h4>An Identity of Ramanujan</h4>
<div class="prettyprint code">
$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } }$
</div>
</div>
<div class="col-md-6">
<h3 >MathML Examples</h3>
<h4>Curl of a Vector Field</h4>
<div class="prettyprint">
<math display="block"><mrow><mover accent="true"><mrow><mo>∇</mo></mrow><mrow><mo>→</mo></mrow></mover><mo>×</mo><mover accent="true"><mrow><mi>F</mi></mrow><mrow><mo>→</mo></mrow></mover><mo>=</mo><mrow><mo>(</mo><mfrac><mrow><mo>∂</mo><msub><mrow><mi>F</mi></mrow><mrow><mi>z</mi></mrow></msub></mrow><mrow><mo>∂</mo><mi>y</mi></mrow></mfrac><mo>−</mo><mfrac><mrow><mo>∂</mo><msub><mrow><mi>F</mi></mrow><mrow><mi>y</mi></mrow></msub></mrow><mrow><mo>∂</mo><mi>z</mi></mrow></mfrac><mo>)</mo></mrow><mstyle mathvariant="bold" mathsize="normal"><mrow><mi>i</mi></mrow></mstyle><mo>+</mo><mrow><mo>(</mo><mfrac><mrow><mo>∂</mo><msub><mrow><mi>F</mi></mrow><mrow><mi>x</mi></mrow></msub></mrow><mrow><mo>∂</mo><mi>z</mi></mrow></mfrac><mo>−</mo><mfrac><mrow><mo>∂</mo><msub><mrow><mi>F</mi></mrow><mrow><mi>z</mi></mrow></msub></mrow><mrow><mo>∂</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow><mstyle mathvariant="bold" mathsize="normal"><mrow><mi>j</mi></mrow></mstyle><mo>+</mo><mrow><mo>(</mo><mfrac><mrow><mo>∂</mo><msub><mrow><mi>F</mi></mrow><mrow><mi>y</mi></mrow></msub></mrow><mrow><mo>∂</mo><mi>x</mi></mrow></mfrac><mo>−</mo><mfrac><mrow><mo>∂</mo><msub><mrow><mi>F</mi></mrow><mrow><mi>x</mi></mrow></msub></mrow><mrow><mo>∂</mo><mi>y</mi></mrow></mfrac><mo>)</mo></mrow><mstyle mathvariant="bold" mathsize="normal"><mrow><mi>k</mi></mrow></mstyle></mrow></math>
</div>
<h4>Definition of Christoffel Symbols</h4>
<div class="prettyprint">
<math display="block"><mrow><msup><mrow><mo>(</mo><msub><mrow><mo>∇</mo></mrow><mrow><mi>X</mi></mrow></msub><mi>Y</mi><mo>)</mo></mrow><mrow><mi>k</mi></mrow></msup><mo>=</mo><msup><mrow><mi>X</mi></mrow><mrow><mi>i</mi></mrow></msup><msup><mrow><mo stretchy="false">(</mo><msub><mrow><mo>∇</mo></mrow><mrow><mi>i</mi></mrow></msub><mi>Y</mi><mo stretchy="false">)</mo></mrow><mrow><mi>k</mi></mrow></msup><mo>=</mo><msup><mrow><mi>X</mi></mrow><mrow><mi>i</mi></mrow></msup><mrow><mo>(</mo><mfrac><mrow><mo>∂</mo><msup><mrow><mi>Y</mi></mrow><mrow><mi>k</mi></mrow></msup></mrow><mrow><mo>∂</mo><msup><mrow><mi>x</mi></mrow><mrow><mi>i</mi></mrow></msup></mrow></mfrac><mo>+</mo><msubsup><mrow><mi>Γ</mi></mrow><mrow><mi>i</mi><mi>m</mi></mrow><mrow><mi>k</mi></mrow></msubsup><msup><mrow><mi>Y</mi></mrow><mrow><mi>m</mi></mrow></msup><mo>)</mo></mrow></mrow></math>
</div>
<h4>Standard Deviation</h4>
<div class="prettyprint code">
<math display="block"><mrow><mi>σ</mi><mo>=</mo><msqrt><mrow><mfrac><mrow><mn>1</mn></mrow><mrow><mi>N</mi></mrow></mfrac><mstyle displaystyle="true"><mrow><munderover><mrow><mo>∑</mo></mrow><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mrow><mi>N</mi></mrow></munderover><mrow><msup><mrow><mo stretchy="false">(</mo><msub><mrow><mi>x</mi></mrow><mrow><mi>i</mi></mrow></msub><mo>−</mo><mi>μ</mi><mo stretchy="false">)</mo></mrow><mrow><mn>2</mn></mrow></msup></mrow></mrow></mstyle></mrow></msqrt><mo>.</mo></mrow></math>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3 >AsciiMathML Example</h3>
<div class="prettyprint code">
Solving the quadratic equation.
Suppose `a x^2+b x+c=0` and `a!=0`. We first divide by `\a` to get `x^2+b/a x+c/a=0`.
Then we complete the square and obtain `x^2+b/a x+(b/(2a))^2-(b/(2a))^2+c/a=0`.
The first three terms factor to give `(x+b/(2a))^2=(b^2)/(4a^2)-c/a`.
Now we take square roots on both sides and get `x+b/(2a)=+-sqrt((b^2)/(4a^2)-c/a)`.
Finally we move the `b/(2a)` to the right and simplify to get
the two solutions: `x_(1,2)=(-b+-sqrt(b^2-4a c))/(2a)`
</div>
</div>
<div clas="col-md-6">
<h3 >WordPress.com/Wikipedia image replacement example</h3>
<p>(Use the WordPress.com/Wikipedia bookmarklet to replace this image with MathJax)</p>
<img src="latex.png" alt="\begin{array}{rl} m_1a_1 + m_2a_2 &= m_1 \left( \frac{m_2}{m_1+m_2} \right) + m_2 \left( \frac{-m_1}{m_1+m_2} \right) \\ &= \frac{m_1m_2}{m_1+m_2} - \frac{m_2m_1}{m_1+m_2} = 0 \end{array}" title="\begin{array}{rl} m_1a_1 + m_2a_2 &= m_1 \left( \frac{m_2}{m_1+m_2} \right) + m_2 \left( \frac{-m_1}{m_1+m_2} \right) \\ &= \frac{m_1m_2}{m_1+m_2} - \frac{m_2m_1}{m_1+m_2} = 0 \end{array}" class="latex">
</div>
</div>
</div>
</body>
</html>