npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@clevy/showdown-katex

v0.8.1

Published

showdown extension that adds latex and asciimath support

Downloads

13

Readme

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.