在 MathJax 等浏览器中使用 TikZ

Question

我猜这已经在一个线程中完成了，但我只花了两个小时阅读各种线程并且无法解决一个非常基本的问题。

长话短说： 我正在尝试在网络浏览器中为家庭作业生成器创建动态方程/图表。到目前为止，我一直在使用 MathJax 并喜欢它来解决等式方面的问题。这非常简单，因为我只需要包含一行 Javascript 代码，然后我就可以开始编码了：

<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>

<?
$x = rand(2,5);
echo "x|^2| = ".pow($x,2).", so x = |\pm|$x";
?>

它会正确地将其转换为浏览器上的等式形式。

现在，我的目标是使用 TikZ 做同样的事情，这样我就可以使用以下代码即时创建三角形等：

<?
$vertex1 = rand(2,5);
$vertex2 = rand(2,5);
?> 
\documentclass[12pt, border=5mm]{standalone}
\usepackage{tikz}
\begin{document}
\begin{tikzpicture}
\draw (0,0) node[anchor=north]{$A$}
  -- (<? echo $vertex1; ?>,0) node[anchor=north]{$C$}
  -- (<? echo $vertex1; ?>,<? echo $vertex2; ?>) node[anchor=south]{$B$}
  -- cycle;
\end{tikzpicture}
\end{document}

所以我的第一个问题，我认为答案是“否”，但无论如何都值得检查 - 有没有一种简单的方法可以在 JavaScript 中调用 TikZ，就像在 MathJax 中一样？因为那太棒了。

如果没有，我怎样才能从HTML/Javascript 到达一个我可以实际使用TikZ 的地方？我相信有些网站会显示TikZ 代码，但我找不到任何关于此的文档（一切都假设我使用的 LaTeX 程序可以通过简单的\usepackage{tikz} 调用来召唤TikZ，我不认为MathJax 可以）。

目前，我通过 MAMP 在我的 Macbook 的本地主机上运行我的脚本，但最终我想将它移动到一个实际的 Web 服务器 - 但如果归结为需要在根级别安装它，我可以调查一下。只需要一些明确的解释，因为我对 LaTeX 的技术方面真的很陌生。

Answer 1

是的，您可以通过https://github.com/kisonecat/tikzjax 在 JavaScript 中运行 TikZ 并获得 SVG 输出。加载适当的 CSS 和 JavaScript 后，它会转换

<script type="text/tikz">
  \begin{tikzpicture}
    \draw (0,0) circle (1in);
  \end{tikzpicture}
</script>

进入预期的 SVG。

TikZJax 通过在浏览器中实际运行 TeX 本身来工作。用web2js e-TeX 的 Pascal 源码 被编译成 WebAssembly；在节点下运行，加载乳胶格式（没有所有连字符数据），并且

\documentclass[margin=0pt]{standalone}
\def\pgfsysdriver{pgfsys-ximera.def}
\usepackage{tikz}

被执行。然后内存被转储；通过在浏览器中重新加载转储的内存，可以非常快速地到达 TikZ 已加载的位置。 （这相当于玩virtex 和initex 游戏，但在浏览器中。）通过使用PGF 的SVG 驱动程序和dvi2html，DVI 输出被转换为SVG。

所有这一切都发生在浏览器中！如果你转到http://tikzjax.com/ 并打开 Web 控制台，你会看到熟悉的输出

This is e-TeX, Version 3.14159265-2.6 (preloaded format=latex 2019.2.22)