Использование TikZ в браузере, таком как MathJax

Я предполагаю, что это было сделано в потоке раньше, но я только что провел два часа, читая различные потоки, и не могу понять очень простой вопрос.

Короче говоря: я пытаюсь создать динамические уравнения/диаграммы в веб-браузере для генератора домашних заданий. До сих пор я использовал 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}

Итак, мой первый вопрос, на который, я думаю, ответили «нет», но все равно стоит проверить — есть ли простой способ вызвать TikZ в Javascript, как в MathJax? Потому что это было бы потрясающе.

Если нет, как я могу добраться до места, где я действительно могу использовать TikZ из HTML/Javascript? Я считаю, что некоторые веб-сайты показывают код TikZ, но я не могу найти никакой документации по этому поводу (все просто предполагает, что я использую программу LaTeX, которая может вызвать TikZ с помощью простого вызова \usepackage{tikz}, что я не думаю, что MathJax может сделать).

На данный момент я запускаю свои сценарии на локальном хосте своего Macbook через MAMP, но в конечном итоге я хотел бы переместить его на настоящий веб-сервер, но если дело доходит до необходимости установить его на корневом уровне, я могу изучить тот. Просто нужно несколько четких объяснений, так как я действительно новичок в технической стороне LaTeX.


person Alex Gold    schedule 20.05.2018    source источник
comment
Итак, вы можете показать свой генератор домашних заданий?   -  person Rainb    schedule 07.07.2020


Ответы (1)


Да, вы можете запустить TikZ в JavaScript через https://github.com/kisonecat/tikzjax и получить 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 для PGF вместе с dvi2html вывод DVI преобразуется в SVG.

Все это действительно происходит в браузере! Если вы перейдете на http://tikzjax.com/ и откроете веб-консоль, вы увидите знакомый вывод

This is e-TeX, Version 3.14159265-2.6 (preloaded format=latex 2019.2.22)
person kisonecat    schedule 23.02.2019
comment
Это отличное начало! Я посмотрел и добился некоторого успеха. Знаете ли вы, есть ли способ перехватить дополнительные запросы \usepackage при использовании этого? Я смог создать любую конструкцию tikz, которую нашел, за исключением тех, которые используют дополнительные пакеты, что, к сожалению, на данный момент является приличным ограничением. - person Alex Gold; 24.02.2019
comment
Да, если вы, скажем, установили TeXlive на свой компьютер, вы можете создать дамп ядра со всеми предварительно загруженными нужными вам пакетами (что ценно, потому что предварительная загрузка пакетов НАМНОГО быстрее). Для этого запустите initex.js с github.com/kisonecat/web2js. Другой (более медленный) вариант — чтобы добавить нужные файлы в поддельную файловую систему и отправить эти файлы в браузер. - person kisonecat; 24.02.2019
comment
Чтобы уточнить (это не сильная область для меня), это будет дамп ядра, который я сделаю на своей машине, а затем загружу на свой сервер для доступа туда? Или это предполагает, что я запускаю сервер с моей собственной машины в первую очередь? - person Alex Gold; 24.02.2019
comment
Правильно -- дамп памяти (сделанный после загрузки кучи локально установленных пакетов) можно сделать на своем собственном компьютере, а затем загрузить куда-нибудь. Дамп памяти мал по сравнению со всей установкой TeX. Я должен сделать это проще... - person kisonecat; 25.02.2019
comment
Ах, это звучит блестяще! Есть ли где-нибудь пошаговое руководство, показывающее это более подробно? Я занимаюсь случайным веб-дизайном, но у меня нет ничего в этой области, поэтому я даже не знаю, какое программное обеспечение использовать. Вы упомянули TeXlive, который, похоже, предназначен только для Windows. У меня Mac, но будет ли MacText 2018 иметь ту же функциональность? Вот куда TeXlive направил пользователей Mac. - person Alex Gold; 25.02.2019
comment
@Alex Gold Вы когда-нибудь добивались успеха со всеми желаемыми пакетами, предварительно загруженными в дампе ядра? Я пытаюсь сделать это: TeX SX: kisonecat/web2js или tikzjax: кто-нибудь может объяснить, как изменить tex.web, чтобы получить eTeX? и TeX SX: Как сделать дамп памяти LaTeX на основе e-TeX в среда JavaScript? - person CarpeDiemKopi; 17.07.2019
comment
@CarpeDiemKopi Честно говоря, у меня не было возможности попробовать; Я очень мало знаю об этой области, поэтому потребуется некоторое время, чтобы понять, как все это связано. Тем не менее, он в моем списке, чтобы вернуться к нему, и я также проверю эти ссылки — я опубликую обновление, когда у меня будет возможность попробовать его в деле! - person Alex Gold; 19.07.2019
comment
@Alex Gold: Марсель Крюгер предложил решение! И в настоящее время я работаю над рабочим процессом, который реализует это решение. Я хочу TikZJax/LaTeX по крайней мере с этими пакетами: Calculator, Calculus, TikZ и CircuiTikZ. - person CarpeDiemKopi; 20.07.2019
comment
@CarpeDiemKopi Я вижу сообщение Марселя Крюгера по одной из ваших ссылок, но даже то, что он делает, мне недоступно. Я знаю основные веб-языки (HTML, Javascript, PHP, CSS), но что-либо с установкой программного обеспечения на сервисы выходит за рамки моего опыта. Я надеюсь найти где-нибудь честную пошаговую инструкцию для неспециалиста, но пока все, что я нашел, написано для людей, которые уже знают, что делают. Ставит меня в тупик, пока у меня не будет много часов, чтобы изучить основы в этой области. - person Alex Gold; 25.07.2019
comment
Кисонекот здесь. Я сейчас в разъездах, но горю желанием собрать более удобную версию всего этого (конечно, к концу августа). - person kisonecat; 29.07.2019
comment
@kisonecat Есть новости на этот счет? Звучит очень полезно! - person Alex Gold; 13.10.2019
comment
У кого-то это заработало? Я получаю эту ошибку: Доступ к извлечению по адресу 'tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wass07d38.wasm> href="http://127.0.0.1:8000" rel="nofollow noreferrer">127.0.0.1:8000" заблокирован политикой CORS: заголовок "Access-Control-Allow-Origin" отсутствует. присутствует на запрашиваемом ресурсе. Если непрозрачный ответ соответствует вашим потребностям, установите для режима запроса значение «no-cors», чтобы получить ресурс с отключенным CORS. - person evolved; 26.04.2021
comment
Вероятно, у меня неправильно настроен CORS в этом домене. У вас есть способ разместить эти активы? - person kisonecat; 27.04.2021