Published
Edited
Apr 22, 2020
mjAware(md)`I believe that ${String.raw`$$e^{i\pi} + 1 = 0$$`} is the most beautiful equation in the word.`
tex2chtmlExample = {
await Promises.delay(1000)
const container = html`<div style="font-size: 20px; padding: 2px 0; max-width: 640px"></div>`
const el = MathJax.tex2chtml(String.raw`F_n = \frac{1}{\sqrt 5} \left[ \left( \frac{1+\sqrt 5} 2 \right)^n - \left( \frac{1-\sqrt 5} 2 \right)^n \right]`, { em: 20, ex: 10 })
container.appendChild(el)
return container
}
md`Comparing to what ${tex`\KaTeX`} renders:
${tex.block`F_n = \frac{1}{\sqrt 5} \left[ \left( \frac{1+\sqrt 5} 2 \right)^n - \left( \frac{1-\sqrt 5} 2 \right)^n \right]`}
`
mjAware(md)`Custom commands work too! This makes it significantly useful after KaTeX. For example,
${String.raw`$$\newcommand{\set}[1]{\\{#1\\}}
\mathbb{Z} = \set{\cdots, -1, 0, 1, 2, 3, \cdots}$$`}
is an infinite set.`
chtmlStylesheet = tex2chtmlExample, (includeStyleSheet ? MathJax.chtmlStylesheet() : null)
mjAware = tagFunction => {
return (strings, ...args) => {
const el = tagFunction(strings, ...args)
MathJax.typeset([el])
return el
}
}
MathJax = loadMathJax(() => ({
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
chtml: {
fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/output/chtml/fonts/woff-v2',
}
}))
mathjaxBlob = (await fetch('https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-chtml.js')).blob()
loadMathJax = {
// reusable, disposable, no-conflict (?) MathJax loader
return async configThunk => {
delete window.MathJax
delete window.ContextMenu
window.MathJax = configThunk()
const MathJax = await import(URL.createObjectURL(await mathjaxBlob))
.then(() => window.MathJax)
return MathJax
}
}
import { checkbox } from '@jashkenas/inputs'
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.
