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

我正在使用katex的自动渲染扩展来渲染键入的数学公式。如何使此扩展与内容可编辑的HTML元素（

textarea

，

input

）一起工作

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

textarea

或

input

元素

我尝试使用属性

contenteditable

设置为true的

div

。这项工作有很多警告，所以我不想继续这项工作

测试katex自动渲染模块
document.addEventListener（“DOMContentLoaded”，函数（）{
//让contentEditableDiv=document.querySelector（“#contentEditableDiv”）；
文件。添加的文件列表器（“键控”，（e）=>{
RenderManElement（document.body{
分隔符：[
{左：$$，右：$$，显示：true}，
{左：“\\[”，右：“\\]”，显示：true}，
{左：“$”，右：“$”，显示：false}，
{左：\\（“，右：\\）”，显示：false}
]
});
});
});
$\alpha$
$\alpha$
$\alpha$
$\alpha$
$\alpha$
$\alpha$
$\alpha$
$\alpha$
$\alpha$
$\alpha$
$\alpha$
$\alpha$

$\alpha$
$\alpha$
$\alpha$
$\alpha$
尝试键入一些文本+数学
这里有数学公式

---

我希望内容可编辑HTML元素（

textarea

和

input

）中的

$\alpha$

在

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

您可以做的是获取输入值并在其他地方渲染它

假设你有：

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

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


那你就可以了

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

将输入的新内容呈现到所需元素中

这是一个.
我认为您无法轻松编辑包含渲染输出的元素中的文本。但从文本区域来看，它应该是可行的。
formulaInput.addEventListener("keyup", (e) => {
  katex.render(formulaInput.value, element, {
    throwOnError: false
  });
});