svelte - 如何在 slim 的项目中使用 MathJax？

Question

我正在 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

在 svelte 组件上:

import MathJax from 'mathjax'

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

svelte:head 方式:

我尝试的第二个解决方案是在这样的脚本标签中从 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

hacky 方式:

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

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

Answer 1

我不知道你是否最终在你的评论中使用了这个例子。我希望你做到了。

对于其他想要解决此问题的人，我尝试了以下方法。 (我不知道它是否适用于 Svelte 应用程序，但至少它有效)

评论中找到的例子here说如下:

// Thanks to https://github.com/dpvc
<script>
MathJax = {
  tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

所以在我的 app/public/index.html 文件中，我添加了指向 CDN 的脚本，就像它在评论中所说的那样。

之后，我尝试直接在 Svelte 脚本上使用 Latex 表示法，如:

# Svelte file
<script lang="ts">
  let equ = `$$x = \\frac{t}{3}$$`;
</script>
<main>
  {equ}
</main>

它确实奏效了。 🎉

起初，它不工作，所以用我的 monke 大脑，我想可能是因为我没有将其他脚本部分添加到 index.html 文件中。我添加了它并且它起作用了。所以也许是因为语言服务器不工作或其他原因......我不确定，我正在使用 VSCode 并在重新启动并删除该部分后，我工作了。这就是我对此的 super 调查。