Markdown-it-katex如何实现上标？Svelte 5环境下的渲染问题

问题根源在于你开启了MarkdownIt的typographer选项，该选项会自动处理排版符号，将^后的内容强制转换为下标，与Katex的上标语法^产生冲突，导致公式渲染异常。

修复方案 #

修改MarkdownIt的初始化配置，将typographer设置为false，关闭自动排版符号转换功能，让Katex能正常解析上标语法：

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

    // 关闭typographer，避免干扰Katex的公式语法解析
    const md = new MarkdownIt({ html: false, linkify: true, typographer: false });
    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>

原理说明 #

当typographer为true时，MarkdownIt会优先解析文本中的^符号并转换为下标格式，导致Katex接收到的公式内容已经被篡改，无法识别上标语法。关闭该选项后，MarkdownIt不会干预$...$包裹的LaTeX公式内容，Katex就能正常解析^2为上标格式。

内容的提问来源于stack exchange，提问作者Alexander Juhl