如何从文本区域在 div 中显示乳胶代码?

use*_*635 3 php string jquery latex

物理 SE数学 SE中,每当有人写下类似的文本时

some text $equation1$ some text $equation2$ ...
Run Code Online (Sandbox Code Playgroud)

在文本区域中,文本显示在下面的 LaTeX 格式的框中。

有谁知道如何做到这一点?我的意思是使用哪种工具以及如何在 div 中渲染方程以及如何避免在文本区域中渲染它。

Zan*_*non 5

他们使用MathJax。您可以在您的网站上阅读有关如何使用它的信息,并在此处阅读语法示例。

使用示例:

<!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>
Run Code Online (Sandbox Code Playgroud)

呈现为:

结果

演示

编辑:如果您不想在一个文本区域中呈现数学方程,您可以使用特定类标记该元素,例如:math-editor并将 MathJax 配置为:

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

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

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

EDIT2:另一个演示,展示了如何在文本区域中输入纯文本后使用渲染代码更新 div。