showdown-katex
npm install showdown-katex
Showdown extension to render LaTeX math and AsciiMath using KaTeX;
Special characters do not need escaping
Works well alongside bootmark
Config
You can customize what gets passed to the katex renderer by passing a config object.
These are the defaults:
{
displayMode: true,
throwOnError: false, //allows katex to fail silently
errorColor: '#ff0000',
delimiters: [
{ left: "$$", right: "$$", display: true }, // katex default
{ left: "\\[", right: "\\]", display: true }, // katex default
{ left: "\\(", right: "\\)", display: false }, // katex default
{ left: '~', right: '~', display: false, asciimath: true },
{ left: '&&', right: '&&', display: true, asciimath: true },
],
}Examples:
<script>
const converter = new showdown.Converter({
extensions: [
showdownKatex({
// maybe you want katex to throwOnError
throwOnError: true,
// disable displayMode
displayMode: false,
// change errorColor to blue
errorColor: '#1500ff',
}),
],
});
converter.makeHtml('~x=2~');
</script>Check katex for more details.
FOUC
If your page suffers from a "Flash Of Unstyled Content," add this to your <body> tag:
<body style="display:none;" onload="$('body').show();">This hides the body and shows it only when the JavaScript has loaded.
Math Example
in asciimath
&& x = (-b+-sqrt(b^2-4ac))/(2a) &&
&& x = (-b+-sqrt(b^2-4ac))/(2a) &&
in latex
$$ x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a} $$
$$ x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a} $$
They will both render the exact same thing. If the examples don't render correctly click here.