Aller au contenu

rod2ik/TikZJax

Introduction

rod2ik/tikzjax, is a GPLv3 opensource project, that natively renders TikZ/LaTeX AND tkz-tab/LaTeX for maths variation tables and maths sign tables , directly inside an HTML page AND/OR inside usual documentation websites, notably MkDocs with Material theme.

Please refer to this MkDocs demo site, with documentation for thorough documentation and more info: https:/rod2ik.github.io/tikzjax

rod2ik/tikzjax is originally a fork from the great works 👏👏👏 of :

Both latter projects are based on their own web2js and dvi2html projects.
Note that rod2ik/tikzjax is based on custom forks rod2ik/web2js and rod2ik/dvi2html.

Please also note, that rod2ik/tikzjax has been, since then been massively :

  • refactored as an ESM project
  • extended, to render both TikZ Figures AND NEW tkz-tab macros for math variations tables / math sign tables :
    • NEW a global configuration file tikzjax.config.js through window.TikzJaxOptions;
    • inside a custom HTML Bloc, using a <script type="text/tikz"> tag syntax:
      • OLD automatic rendering of TikZ Figures (THE historical functionnality of kisone/tikzjax)
      • NEW ❗📢❗ automatic rendering of tkz-tab macros for maths variations tables / math sign tables ❗📢❗
      • NEW Light/Dark Themes via the global customisation file
      • the <script> syntax is natively compatible inside an Mkdocs Markdown Page:
        • NEW natively compatible with Material Light/Dark Themes
        • NEW compatibility with Material Admonitions: collapsable or not
        • NEW compatibility with Material Content Tabs
    • inside MkDocs, with Material (or without it..), using a tikzjax code bloc syntax, natively:
      • NEW automatic rendering of TikZ Figures
      • NEW ❗📢❗ automatic rendering of tkz-tab macros for maths variations tables / math sign tables ❗📢❗
      • NEW Compatibility with Material Light/Dark Themes (possibly customizable via the global customisation file)
      • NEW compatibility with Material Admonitions: collapsable or not
      • NEW compatibility with Material Content Tabs
    • Other Documentation Sites:
      • Possibly all functionnalities of MkDocs, if your documentation tools uses python-markdown.

All the latter syntaxes also offer:

  • NEW a global configuration file tikzjax.config.js through window.TikzJaxOptions;
  • NEW per-table local overrides through data-* attributes;
  • NEW native and customizable Light/Dark themes support, including Material for MkDocs;
  • HALF NEW browser-side cache through IndexedD ( OLD for TikZ Figures and NEW for tkz-tab tables )
  • HALF NEW Spinner animation ( OLD for TikZ Figures and NEW for tkz-tab tables )
  • HALF NEW timeout, worker restart, retry handling ( OLD for TikZ Figures and NEW for tkz-tab tables )
  • NEW A customizable fallback error image

Tikz Figures Basic Examples

Info

There are two syntaxes for drawing TikZ Figures and/or tkz-tab math variations tables / math sign tables.

  • In HTML Pages, you can use <script> tags syntax for both TikZ Figures and/or maths variations tables / maths sign tables
  • In MkDocs Markdown Pages, you can use tikzjax code blocks syntax for both TikZ Figures and/or maths variations tables / maths sign tables

1. TikZ Figures Example with <script> tag

In HTML Pages, to draw TikZ Figures, you can basically use this syntax, which was the original TikZ syntax developed by kisone/tikzjax.

This code :

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

renders as

2. TikZ Figures Example with tikzjax code block

In MkDocs Markdown Pages, to draw TikZ Figures, you can also use the syntax with tikzjax code blocks:

This code :

```tikzjax
\begin{tikzpicture}
    \draw (0,0) circle (1in);
\end{tikzpicture}
</script>
```

renders as:

3. tkz-tab Basic Example with <script> tag

In HTML Pages, to draw tkz-tab math variation tables / math sign tables, you can basically use this syntax :

This code :

<script type="text/tikz">
\begin{tikzpicture}[line width=1.2pt, font=\Large]
    \tkzTabInit[lgt=5, espcl=3, lw=1.2pt]
        {$x$/1.5 , $f'(x)=3x(x-2)$/1.5 , $f(x)=x^3-3x^2+2$/2.5}
        {$-\infty$, $0$, $2$, $+\infty$}
    \tkzTabLine{,+,z,-,z,+,}
    \tkzTabVar{-/ $-\infty$, +/ $2$, -/ $-2$, +/ $+\infty$}
\end{tikzpicture}
</script>

renders as:

4. tkz-tab Basic Example with tikzjax code block

In MkDocs Markdown Pages, to draw tkz-tab math variation tables / math sign tables, you can basically use this syntax :

This code :

```tikzjax
\begin{tikzpicture}[line width=1.2pt, font=\Large]
    \tkzTabInit[lgt=5, espcl=3, lw=1.2pt]
        {$x$/1.5 , $f'(x)=3x(x-2)$/1.5 , $f(x)=x^3-3x^2+2$/2.5}
        {$-\infty$, $0$, $2$, $+\infty$}
    \tkzTabLine{,+,z,-,z,+,}
    \tkzTabVar{-/ $-\infty$, +/ $2$, -/ $-2$, +/ $+\infty$}
\end{tikzpicture}
```

renders as:

5. More Advanced Examples

For more advanced exemples, please see the Advanced Examples Page.

Intentionally invalid Tikz Code

The following block is intentionally wrong (it has an intentional syntax error) to let you check the configured error image is displayed properly.

```tikzjax
\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
```

renders as:

\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};

Where to go next