svelte - Markdown-it-katex - how to make superscript? - Stack Overflow

admin管理员组

文章数量:1294331

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?

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?

• svelte
• katex
• markdown-it

Share Follow edited Feb 12 at 14:50 marc_s 755k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Feb 12 at 14:45 Alexander JuhlAlexander Juhl 533 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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/ajax/libs/KaTeX/0.5.1/katex.min.css">

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

本文标签： svelteMarkdownitkatexhow to make superscriptStack Overflow