History

zhiyuanliu cb17bad1d4 activity visualize step one		2023-07-29 06:19:10 -07:00
..
dist	activity visualize step one	2023-07-29 06:19:10 -07:00
lib	activity visualize step one	2023-07-29 06:19:10 -07:00
node_modules	activity visualize step one	2023-07-29 06:19:10 -07:00
src	activity visualize step one	2023-07-29 06:19:10 -07:00
CHANGELOG.md	activity visualize step one	2023-07-29 06:19:10 -07:00
LICENSE	activity visualize step one	2023-07-29 06:19:10 -07:00
README.md	activity visualize step one	2023-07-29 06:19:10 -07:00
package.json	activity visualize step one	2023-07-29 06:19:10 -07:00

README.md

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.