@clevy/showdown-katex
v0.8.1
Published
showdown extension that adds latex and asciimath support
Downloads
13
Readme
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: false },
{ left: '~', right: '~', display: false, 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.
Default Delimiters
| Format | Left | Right | Display mode |
| --------- | ---- | ----- | ------------ |
| Latex | $$
| $$
| false
|
| Asciimath | ~
| ~
| false
|
To define custom delimiters simply define a delimiters
property in the config as an array of objects. Each object MUST have a left
(string
) property with the left delimiter, and a right
(string
) property with the right delimiter. The oject may also have a display
(boolean
) property if the delimiter should use display mode instead of inline mode, and an asciimath
(boolean
) id the delimiter is Asciimath instead of Latex.
Custom delimiters won't disable the defaults, so you can use both custom and default delimiters.
const converter = new showdown.Converter({
extensions: [
showdownKatex({
delimiters: [{ left: '( ͡° ͜ʖ ͡°)', right: '( ͡° ͜ʖ ͡°)', asciimath: true }],
}),
],
});
converter.makeHtml(
'some text here, ( ͡° ͜ʖ ͡°) E=mc^2 ( ͡° ͜ʖ ͡°), you can still use ~ E=Mc^2 ~',
);
FOUC
If your page suffers from a "Flash Of Unstyled Content," add this to your <body>
tag:
<body style="display:none;" onload="document.body.style.display='block'">
This hides the body and shows it only when the JavaScript has loaded.
Math Example
```asciimath
x = (-b +- sqrt(b^2-4ac)) / (2a)
```
x = (-b +- sqrt(b^2-4ac)) / (2a)
```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.