在像MathJax这样的浏览器中使用TikZ

Question

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

长话短说：我正在尝试在Web浏览器中为家庭作业生成器创建动态方程/图表。到目前为止，我一直在使用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一样？因为那太棒了。

如果没有，我怎样才能到达我可以实际使用TikZ的HTML/Javascript的地方？我相信一些网站显示TikZ代码，但我找不到任何关于此的文档（一切都假设我使用的是一个可以用简单的TikZ调用召唤\usepackage{tikz}的LaTeX程序，我认为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游戏，但在浏览器中。）通过使用SVG驱动程序和dvi2html，DVI输出转换为SVG。

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

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