DOCSEARCHbyAlgolia
Submit Docs

TikZJax Documentation

repository·master·Indexed 20 days ago

https://github.com/kisonecat/tikzjax

A browser-based tool that converts TikZ code embedded in <script type="text/tikz"> tags into SVG images using WebAssembly. It performs the compilation process on the client side, utilizing a WebAssembly-compiled TeX engine and an SVG driver for PGF to replace script tags with rendered SVG elements.

Tokens
1.1K
Snippets
5
Records
6
Agent score
67%

What's inside TikZJax

  1. How TikZJax works

    master

    TikZJax performs the entire compilation process within the browser using the following pipeline:

    1. WebAssembly Compilation: The Pascal source of tex is compiled to WebAssembly via web2js.
    2. LaTeX Execution: A minimal LaTeX environment is initialized using \documentclass[margin=0pt]{standalone}, \def\pgfsysdriver{pgfsys-ximera.def}, and \usepackage{tikz}.
    3. Core Dumping: The resulting core is dumped and compressed to allow for rapid reloading in the browser.
    4. SVG Conversion: An SVG driver for PGF is used in conjunction with dvi2html to convert the DVI output into the final SVG element, which replaces the original <script type="text/tikz"> tag.

  2. Use TikZJax to render TikZ code as SVGs

    master

    TikZJax allows you to render TikZ code directly in the browser by converting <script> tags containing TikZ code into SVG images. This process happens entirely on the client side using WebAssembly.

    <!-- In the <head> -->
<link rel="stylesheet" type="text/css" href="http://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>

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

  3. Render TikZ code using text/tikz script tags

    master

    TikZJax identifies content to render by looking for <script> elements with the specific attribute type="text/tikz". The text content inside these tags is treated as the TikZ/LaTeX source code.

    When TikZJax processes these elements, it automatically wraps the input in a standard LaTeX document structure (\begin{document} and \end{document}) if they are not already present, compiles the code using a WebAssembly-based TeX engine, and replaces the script tag in the DOM with a <div> containing the rendered SVG.

    <script type="text/tikz">
\begin{tikzpicture}
  \draw[blue, thick] (0,0) -- (2,2);
\end{tikzpicture}
</script>

  4. Use TikZJax for automatic rendering

    master

    TikZJax can be used to automatically render TikZ diagrams in a web page. By default, when the script is loaded, it attaches itself to window.TikZJax and executes on window.onload to process the document.

    To prevent the automatic execution on page load, you can set window.TikZJaxNoAutostart to a truthy value before the script loads.

    // To allow automatic rendering on page load:
// Just include the script.

// To prevent automatic rendering and control it manually:
window.TikZJaxNoAutostart = true;
// ... load TikZJax ...
// TikZJax(document); // Call manually when ready

  5. Access the TikZJax class via window.TikZJax

    master

    The TikZJax class is exported to the global window.TikZJax object. This allows you to manually trigger the rendering process by calling TikZJax(document) or passing a specific element to the function.

    // Manual invocation
TikZJax(document);

  6. Initialize TikZJax on a DOM element

    master

    The TikZJax function is the primary entry point for rendering TikZ code within a web page. It scans a provided root element for <script> tags with the type text/tikz, processes the TeX code contained within them, and replaces the script tags with rendered HTML/SVG content.

    To use it, call TikZJax(root) where root is a DOM element (such as document.body) that contains your TikZ scripts.

    import { TikZJax } from './TikZJax.js';

// Assuming your HTML has elements like:
// <script type="text/tikz">
//   \begin{tikzpicture}
//     \draw (0,0) circle (1in);
//   \end{tikzpicture}
// </script>

await TikZJax(document.body);