如何从文本区域显示 div 中的乳胶代码？

Question

在 Physics SE and Math SE 中，每当有人写

这样的文字时

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

在文本区域中，文本显示在下方的 LaTeX 格式的框中。

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

Answer 1

他们使用MathJax. You can read about how to use it at your website reading here and syntax examples 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>

呈现为：

Demo

编辑： 如果您不想在一个文本区域中呈现数学方程式，您可以使用特定的 class 标记该元素，例如：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 中键入内容以复制文本并粘贴到另一个 div 可以呈现的事件MathJax.

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

如何从文本区域显示 div 中的乳胶代码？

How to display latex code in div from a textarea?

php

string

jquery

latex