如何让 katex 与具有输入字段的 HTML 元素一起工作？

Question

我正在使用 katex 的自动呈现扩展来呈现键入的数学公式。如何使此扩展程序与内容可编辑 HTML 元素（textarea、input）一起使用？

我注意到 katex 自动渲染扩展适用于内容无法编辑的 HTML 元素，例如 div 或 p 元素。但是它不适用于内容可编辑元素，例如 textarea 或 input 元素

我试过使用 div 并将属性 contenteditable 设置为 true。这适用于一些警告，所以我宁愿不追求这种努力

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testing the katex auto-render module</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // let contentEditableDiv = document.querySelector("#contentEditableDiv");
            document.addEventListener("keyup", (e) => {

                renderMathInElement(document.body, {
                    delimiters: [
                        { left: "$$", right: "$$", display: true },
                        { left: "\[", right: "\]", display: true },
                        { left: "$", right: "$", display: false },
                        { left: "\(", right: "\)", display: false }
                    ]
                });
            });

        });

    </script>
</head>

<body>
    <textarea id="content">
        $\alpha$
        $\alpha$
        $\alpha$
        $\alpha$
    </textarea>

    <input type="text" name="" id="" value="$\alpha$">

    $\alpha$
    $\alpha$
    $\alpha$
    $\alpha$

    <p> $\alpha$
        $\alpha$
        $\alpha$
        $\alpha$</p>

    <div>
        $\alpha$
        $\alpha$
        $\alpha$
        $\alpha$
    </div>

    <div contenteditable="true" id="contentEditableDiv">try typing some text + math enclosed
        math formulas in here</div>

</body>

</html>

我希望内容可编辑 HTML 元素（textarea 和 input）中的 $\alpha$ 在 keyup 事件后呈现

Answer 1

呈现的结果比文本更复杂，因此您不能直接编辑元素中呈现的内容。同样，您不能简单地在文本区域内渲染公式（HTML 个元素）。

您可以做的是获取输入的值并将其呈现在其他地方。

假设你有：

<div id="content">
</div>

<input type="text" id="formula" value="c = \sqrt{a^2 + b^2}" />

const formulaInput = document.querySelector('#formula');
const element = document.querySelector('#content');

那你可以做

formulaInput.addEventListener("keyup", (e) => {
  katex.render(formulaInput.value, element, {
    throwOnError: false
  });
});

将输入中的新内容渲染到所需的元素中。

这是一个working fiddle。

如何让 katex 与具有输入字段的 HTML 元素一起工作？

How can I make katex work with HTML elements that have an input field?

html

javascript

katex