3

I'm guessing this has been done in a thread before, but I've just spent two hours reading various threads and cannot get my head around a very basic question.

Long story short: I'm trying to create dynamic equations/diagrams in a web browser for a homework generator. So far I've been using MathJax and loving it for the equation side of things. It's very simple as I just need to include a single line of Javascript code and then I'm good to start coding:

<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";
?>

And it correctly turns that into the equation form on the browser.

Now, my goal is to do the same sort of thing with TikZ so I can create triangles and so forth on the fly using code like:

<?
$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}

So my first question, which I think is answered "no" but is worth checking anyhow - is there a simple way to call TikZ in Javascript as with MathJax? Because that would be amazing.

If not, how can I get to a place where I can actually use TikZ from HTML/Javascript? I believe that some websites show TikZ code, but I cannot find any documentation on this (everything just assumes I'm using a LaTeX program that can summon TikZ with a simple \usepackage{tikz} call, which I don't think MathJax can do).

For now, I'm running my scripts on a localhost my Macbook via MAMP, but eventually I would like to move it to an actual web server - but if it comes down to needing to install it at a root level, I can look into that. Just need some clear explanations since I'm really new to the technical side of LaTeX.

  • 2
    Which stackexchange site shows tikz output? Amaze me. – Johannes_B May 20 '18 at 4:49
  • @Johannes_B Oops! Turns out the stackexchange page was just an image of a tikz output. Not sure if that was itself generated (as I've read some things about being able to run the code and output it as a PNG instead of HTML/CSS?) or just an image created in a program and uploaded, but you are correct, it wasn't what I thought. I have read of other sites that do it though, unless that source was inaccurate? – Alex Gold May 20 '18 at 4:55
  • Off-topic, just like this one: tex.stackexchange.com/questions/295894/… – Henri Menke May 20 '18 at 6:16
  • I don't thing that there is a javascript interpreter of TikZ (even in TeXLive.js TikZ is missing). So in any case you will need some server compilation. Probably the simplest way will be to use clsi-sharelatex and then to send the code to compile and recover the result using ajax. – Kpym May 20 '18 at 7:04
  • 1
    There is something called KaTeX which is capable but I don't know the details – percusse May 20 '18 at 7:33

Browse other questions tagged or ask your own question.