showdown extension that adds latex and asciimath support thru katex

Usage no npm install needed!

<script type="module">
  import codingBlocksShowdownKatex from 'https://cdn.skypack.dev/@coding-blocks/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


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 },


  const converter = new showdown.Converter({
    extensions: [
        // maybe you want katex to throwOnError
        throwOnError: true,
        // disable displayMode
        displayMode: false,
        // change errorColor to blue
        errorColor: '#1500ff',

Check katex for more details.


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.