rename to showdown-katex
disallow global config
move window.katexLatex to window.showdownKatex
katex is now bundled with showdownKatex, so there's no need to include externally anymore.

FIXED

add inline latex examples
add inline asciimath examples
remove && as a delimiter for asciimath in displayMode. it was giving too mouch trouble. For asciimath in displayMode, use code block style with the lang set to asciimath. so:
```
  && E=mc^2 &&
```
becomes
```
  ```asciimath
  E=mc^2
  ```
```

MIGRATION

update references to katex-latex in files and showdown extension and update to showdown-katex
if previously using global config, it should now be passed to the global showdownKatex function which returns a showdown extension that can be passed as part of the extensions array
```
  // before
  window.katexLatex.config = {
    throwOnError: true,
  };
  // now
  const converter = new showdown.Converter({
    extensions: [showdownKatex({
      throwOnError: true,
    })]
  });
  converter.makeHtml('~x=2~')
```
if not using custom config, just list "showdown-katex" in the extensions

Readme

Source

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.

Keywords

FAQs

What is @coding-blocks/showdown-katex?

Is @coding-blocks/showdown-katex popular?

Is @coding-blocks/showdown-katex well maintained?

Last updated on 03 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install