如何在苗条的项目中使用 MathJax？

如何解决如何在苗条的项目中使用 MathJax？

我正在 svelte 中开发一个 svelte 文本编辑器项目，代码非常简单 (REPL) :

<script>
    let rawText
    let formatText = (text)=>{
        // Text Formating
        return text
    }
    $: formatedText = formatText(rawText)
</script>

<textarea bind:value={rawText}></textarea>
{#if formatedText}
    {formatedText}
{/if}

我需要能够写出数学方程式。

为此，我找到了 MathJax，但找不到一种干净的方法将其导入我的 svelte 应用程序

我尝试过多种方法，例如

npm 方式：

使用：

npm i mathjax

在纤细的组件上：

import MathJax from 'mathjax'

但是当我这样做时，应用程序变成白色而没有任何错误

苗条：头部方式：

我尝试的第二个解决方案是从像这样的脚本标签中的 cdn 导入 MathJax：

<svelte:head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script
        id="MathJax-script"
        async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
</svelte:head>

它有点工作，因为我可以在浏览器控制台中访问 MathJax 函数，但我不知道在我的 svelte 应用程序中使用它们

capture

骇人听闻的方式：

我发现的最后一个解决方案 in this example 导致了同样的问题。

所以我的问题是如何在我的 svelte 项目中导入 mathjax 或者我可以使用其他东西吗？