Search code examples
sveltekatexmarkdown-it

Markdown-it-katex - how to make superscript?

This is my code (Svelte 5, sveltekit, tailwind):

<script lang="ts">
    import MarkdownIt from 'markdown-it';
    import markdownItKatex from 'markdown-it-katex';
    import 'katex/dist/katex.min.css';

    const md = new MarkdownIt({ html: false, linkify: true, typographer: true });
    md.use(markdownItKatex, { throwOnError: false, errorColor: ' #cc0000' });

    function renderMarkdown(content: string) {
        return md.render(content);
    }

    let content: string = '$a^2+b^2=c^2$';
</script>

<h1>markdown-it-katex</h1>
<div>{@html renderMarkdown(content)}</div>

<style>
</style>

My output is:

a​2+b​2=c​2

But the numbers (2) are lowered (subscript). How can I make the numbers in superscript?

Solution

  • The version of KaTeX that markdown-it-katex uses is ancient because the package is ancient. You have to use a KaTeX stylesheet that is compatible with the output of that version.

    The docs of markdown-it-katex reference KaTeX 0.5.1, at which point the stylesheet was not even included in the NPM package. You could get it from the referenced CDN.

    <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">

    (Alternatively, find a more up to date integration or create one yourself.)