Question

在Physics SE和Math SE中，只要有人写了像

这样的文字

some text $equation1$ some text $equation2$ ...

在textarea中，文本显示在下面用LaTeX格式化的框中。

有谁知道如何做到这一点？我的意思是使用哪个工具以及如何在div中渲染等式以及如何避免在textarea中渲染它。

Answer 1

他们使用MathJax。您可以在阅读here和语法示例here的网站上了解如何使用它。

用法示例：

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>

呈现为：

result

Demo

编辑：如果您不想在一个文本区域中渲染数学公式，则可以使用特定类标记元素，例如：math-editor并将MathJax配置为：

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      ignoreClass: "math-editor" // put this here
    }
  });
</script>

此ignoreClass属性已解释为here。或者您可以使用processClass属性来标记应该处理的内容。

此外，您可以使用jQuery函数绑定textarea，以便在用户在textarea中键入内容时捕获事件，以复制文本并粘贴到可由MathJax呈现的另一个div。

EDIT2 ：另一个demo显示如何在textarea中输入纯文本后使用呈现的代码更新div。

如何在textarea中显示div中的乳胶代码？

1 个答案: