@vincenttam/showdown-katex

v0.10.1

Published

3 years ago

Showdown extension that adds LaTeX, ASCIImath and mhchem support

0High
0Medium
0Low

vincenttam

markdown showdown latex asciimath katex mhchem

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.

Chemical equations example

Examples copied from mhchem's page.

```latex
\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}
```

\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}

Published

Vulnerabilities

Links

Maintainers

Keywords