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:

``js
{
displayMode: true,
throwOnError: false, // allows katex to fail silently
errorColor: '#ff0000',
delimiters: [
{ left: "$$", right: "$$", display: false },
{ left: '~', right: '~', display: false, asciimath: true },
],
}
`

Examples:

`html

`
Check katex for more details.

$3

| 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.

`js
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 tag:

`html

`
This hides the body and shows it only when the JavaScript has loaded.

Math Example

`asciimath
x = (-b +- sqrt(b^2-4ac)) / (2a)
`

`asciimath
x = (-b +- sqrt(b^2-4ac)) / (2a)
`

`latex
x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a}
`

`latex
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.

----