here to learn
Published
Edited
Jul 8, 2019
3 forks
Importers
10 stars
MathJax
Also listed in…
Ingredients
MathJax = require("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML")
.catch(() => window.MathJax)
.then(MathJax => {
MathJax.Hub.Config({
CommonHTML: { scale: 110 }, // scaling to get the same size as katex (but katex still has more spacing between lines...)
tex2jax: { inlineMath: [["$", "$"], ["\\(", "\\)"]] },
displayMath: [["$$", "$$"], ["\\[", "\\]"]],
processEscapes: true,
TeX: { extensions: ["autoload-all.js"] },
});
return new Promise(resolve =>
MathJax.Hub.Register.StartupHook("End", () => resolve(MathJax))
);
})
mjCSS = html`<style id='observable-mathjax-style'>
.MJXc-display {
max-width: 640px;
}
</style>`
function mj() {
const raw = String.raw(...arguments);
if (!document.getElementById('observable-mathjax-style'))
document.body.appendChild(mjCSS);
// hack to autoload AMScd if necessary
// (won't be necessary in MathJax v3: https://github.com/mathjax/mathjax-v3/pull/235)
if (!document.getElementById('mathjax-amscd') && /\\begin\{CD\}/.test(raw)) {
MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.body.appendChild(
html`<div id='mathjax-amscd' style='display: none;'>$\\require{AMScd}$`)]);
}
const elem = document.body.appendChild(html`<span>${raw}`);
return new Promise(resolve => MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem, () => resolve(document.body.removeChild(elem))]));
}
mj`$$\beta(z) = \int_0^\infty \frac{t^{z-1}}{e^{-t}dt}\,$$`
tex.block`\beta(z) = \int_0^\infty \frac{t^{z-1}}{e^{-t}dt}\,`
mj`\begin{align}
F_0 &= 1\\
F_1 &= 1\\
F_n &= F_{n-1} + F_{n-2}, \quad n>1
\end{align}`
tex.block`
\begin{aligned}
F_0 &= 1\\
F_1 &= 1\\
F_n &= F_{n-1} + F_{n-2}, \quad n>1
\end{aligned}
`
md`This is a markdown cell with embedded MathJax:
${await mj`$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$`}`
md`Here's a matrix, sitting nicely inline: ${await mj`$\begin{pmatrix}
a & b \\
c & c
\end{pmatrix}$`}`
md`The [\`autoload-all.js\` extension](http://docs.mathjax.org/en/latest/tex.html?highlight=autoload#autoload-all) is enabled, so the [\`\\bbox\` macro](http://docs.mathjax.org/en/latest/tex.html?highlight=autoload#bbox) "just works":
${await mj`$\bbox[pink]{x+y}$`}
`
md`Here's a little commutative diagram using the [\`AMScd\` package](https://ctan.org/pkg/amscd):
${await mj`\begin{CD}
A @>a>> B\\
@V b V V @VV c V\\
C @>>d> D
\end{CD}`}
Ordinarily you would have to write \`$\\require{AMScd}$\` somewhere before the diagram to load the extension, but the \`mj\` function autoloads it for you. This feature was included because it seems that including an explicit \`$\\require{AMScd}$\` declaration leads to undesirable extra spacing before the diagram:
${await mj`$\require{AMScd}$\begin{CD}
E @>e>> F @>f>> G\\
@V g V V @VV h V @VV i V\\
G @>>j> H @>>k> I
\end{CD}`}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
