Basic Examples

This page shows the basic ways to write TikZJax blocks.

For installation details, see Installation.
For advanced examples, see Advanced Examples.
For all configuration options, see API Reference.

1. Tikz Usage with `<script>` tags

Direct Insertion in HTML

A TIKZ CIRCLE:

Rendering HTML5

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

A TIKZ LINE :

Rendering HTML5

<script type="text/tikz">
\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
    \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
    \draw[thick] (0,0) -- (3,2);
    \node at (1.5,1.7) {$y=\dfrac 13 x$};
\end{tikzpicture}
</script>

in MkDocs Admonitions

NOT COLLAPSIBLE :

Rendering Markdown

Success

!!! success
    <script type="text/tikz">
    \begin{tikzpicture}
        \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
        \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
        \draw[thick] (0,0) -- (3,2);
        \node at (1.5,1.7) {$y=\dfrac 13 x$};
    \end{tikzpicture}
    </script>

COLLAPSIBLE :

Rendering Markdown

Success

??? success
    <script type="text/tikz">
    \begin{tikzpicture}
        \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
        \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
        \draw[thick] (0,0) -- (3,2);
        \node at (1.5,1.7) {$y=\dfrac 13 x$};
    \end{tikzpicture}
    </script>

in MkDocs Content Tabs

Root Content Tabs

Rendering Markdown

QuestionSolution

Draw an orthonormal frame with a function \(f(x)=\dfrac 13 x\)

Here is the orthononal frame and function:

=== "Question"
    Draw an orthonormal frame with a function $f(x)=\dfrac 13 x$

=== "Solution"
    Here is the orthononal frame and function:

    <script type="text/tikz">
    \begin{tikzpicture}
        \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
        \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
        \draw[thick] (0,0) -- (3,2);
        \node at (1.5,1.7) {$y=\dfrac 13 x$};
    \end{tikzpicture}
    </script>

Content Tabs in Admonitions

NON COLLAPSIBLE :

Rendering Markdown

Success

QuestionSolution

Draw a circle

Here is a circle
QuestionSolution

Draw an orthonormal frame with a function \(f(x)=\dfrac 13 x\)

Here is the orthononal frame and function:

!!! success
    1. 

        === "Question"
            Draw a circle
        === "Solution"
            Here is a circle

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

    2. 

        === "Question"
            Draw an orthonormal frame with a function $f(x)=\dfrac 13 x$
        === "Solution"
            Here is the orthononal frame and function:

            <script type="text/tikz">
            \begin{tikzpicture}
                \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
                \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
                \draw[thick] (0,0) -- (3,2);
                \node at (1.5,1.7) {$y=\dfrac 13 x$};
            \end{tikzpicture}
            </script>

COLLAPSIBLE :

Rendering Markdown

Success

QuestionSolution

Draw a circle

Here is a circle
QuestionSolution

Draw an orthonormal frame with a function \(f(x)=\dfrac 13 x\)

Here is the orthogonal frame and function:

??? success
    1. 

        === "Question"
            Draw a circle

        === "Solution"
            Here is a circle

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

    2. 

        === "Question"
            Draw an orthonormal frame with a function $f(x)=\dfrac 13 x$

        === "Solution"
            Here is the orthogonal frame and function:

            <script type="text/tikz">
            \begin{tikzpicture}
                \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
                \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
                \draw[thick] (0,0) -- (3,2);
                \node at (1.5,1.7) {$y=\dfrac 13 x$};
            \end{tikzpicture}
            </script>

2. TikZ Usage in MkDocs Markdown

Compatible with the `<script>` tag

Please note that ANY latter syntax with the <script> tag is compatible and can be written directly in a MkDocs Markdown page.

OR you can use a tikzjax code block, wich is more markdown-minded (and also more stable in mkdocs, just in case).

`tikzjax` Code Block Insertion in MkDocs Markdown

A TIKZ CIRCLE :

Rendering Markdown

\begin{tikzpicture}
    \draw (0,0) circle (1in);
\end{tikzpicture}

The classical tikzjax example:

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

A TIKZ LINE :

Rendering Markdown

\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
    \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
    \draw[thick] (0,0) -- (3,2);
    \node at (1.5,1.7) {$y=\dfrac 13 x$};
\end{tikzpicture}

```tikzjax
\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
    \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
    \draw[thick] (0,0) -- (3,2);
    \node at (1.5,1.7) {$y=\dfrac 13 x$};
\end{tikzpicture}
```

in MkDocs Admonitions

NON COLLAPSIBLE :

Rendering Markdown

Success

\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
    \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
    \draw[thick] (0,0) -- (3,2);
    \node at (1.5,1.7) {$y=\dfrac 13 x$};
\end{tikzpicture}

!!! success
    ```tikzjax
    \begin{tikzpicture}
        \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
        \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
        \draw[thick] (0,0) -- (3,2);
        \node at (1.5,1.7) {$y=\dfrac 13 x$};
    \end{tikzpicture}
    ```

COLLAPSIBLE :

Rendering Markdown

Success

\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
    \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
    \draw[thick] (0,0) -- (3,2);
    \node at (1.5,1.7) {$y=\dfrac 13 x$};
\end{tikzpicture}

??? success
    ```tikzjax
    \begin{tikzpicture}
        \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
        \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
        \draw[thick] (0,0) -- (3,2);
        \node at (1.5,1.7) {$y=\dfrac 13 x$};
    \end{tikzpicture}
    ```

in MkDocs Content Tabs

Root Content Tabs

Rendering Markdown

QuestionSolution

Draw an orthonormal frame with a function \(f(x)=\dfrac 13 x\)

Here is the orthononal frame and function:

\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
    \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
    \draw[thick] (0,0) -- (3,2);
    \node at (1.5,1.7) {$y=\dfrac 13 x$};
\end{tikzpicture}

=== "Question"
    Draw an orthonormal frame with a function $f(x)=\dfrac 13 x$
=== "Solution"
    Here is the orthononal frame and function:

    ```tikzjax
    \begin{tikzpicture}
        \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
        \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
        \draw[thick] (0,0) -- (3,2);
        \node at (1.5,1.7) {$y=\dfrac 13 x$};
    \end{tikzpicture}
    ```

Content Tabs in Admonitions

NOT COLLAPSIBLE :

Rendering Markdown

Success

QuestionSolution

Draw a circle

Here is a circle

\begin{tikzpicture}
    \draw (0,0) circle (1in);
\end{tikzpicture}

QuestionSolution

Draw an orthonormal frame with a function \(f(x)=\dfrac 13 x\)

Here is the orthononal frame and function:

\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
    \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
    \draw[thick] (0,0) -- (3,2);
    \node at (1.5,1.7) {$y=\dfrac 13 x$};
\end{tikzpicture}

!!! success
    1. 

        === "Question"
            Draw a circle

        === "Solution"
            Here is a circle

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

    2. 

        === "Question"
            Draw an orthonormal frame with a function $f(x)=\dfrac 13 x$

        === "Solution"
            Here is the orthononal frame and function:

            ```tikzjax
            \begin{tikzpicture}
                \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
                \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
                \draw[thick] (0,0) -- (3,2);
                \node at (1.5,1.7) {$y=\dfrac 13 x$};
            \end{tikzpicture}
            ```

COLLAPSIBLE :

Rendering Markdown

Success

QuestionSolution

Draw a circle

Here is a circle

\begin{tikzpicture}
    \draw (0,0) circle (1in);
\end{tikzpicture}

QuestionSolution

Draw an orthonormal frame with a function \(f(x)=\dfrac 13 x\)

Here is the orthononal frame and function:

\begin{tikzpicture}
    \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
    \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
    \draw[thick] (0,0) -- (3,2);
    \node at (1.5,1.7) {$y=\dfrac 13 x$};
\end{tikzpicture}

??? success
    1. 

        === "Question"
            Draw a circle

        === "Solution"
            Here is a circle

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

    2. 

        === "Question"
            Draw an orthonormal frame with a function $f(x)=\dfrac 13 x$

        === "Solution"
            Here is the orthononal frame and function:

            ```tikzjax
            \begin{tikzpicture}
                \draw[->, thick] (0,0) -- (4,0) node[right] {$x$};
                \draw[->, thick] (0,0) -- (0,3) node[above] {$y$};
                \draw[thick] (0,0) -- (3,2);
                \node at (1.5,1.7) {$y=\dfrac 13 x$};
            \end{tikzpicture}
            ```

3. tkz-tab Usage with `<script>` tags

In a General HTML Page, you can directly use a <script> tag to automatically render tkz-tab macros.

Rendering Markdown

<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>

4. tkz-tab Usage with `tikjax` Code blocks

`tikjax` Code Block Insertion in MkDocs Markdown

In a MkDocs page, with the Material Theme (or without it..), use a fenced code block with the tikzjax language to automatically render tkz-tab macros.

Rendering Markdown

\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}

```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}
```

in MkDocs Content Tabs

Root Content Tabs

Rendering Markdown

QuestionSolution

Draw the variation table of \(f(x)=x^3-3x^2+2\) on \(\mathbb{R}\).

The variation table can be found below :

\begin{tikzpicture}[line width=1.2pt, font=\Large]
    \tkzTabInit[lgt=6, 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}

=== "Question"
    Draw the variation table of $f(x)=x^3-3x^2+2$ on $\mathbb{R}$.

=== "Solution"
    The variation table can be found below :

    ```tikzjax
    \begin{tikzpicture}[line width=1.2pt, font=\Large]
        \tkzTabInit[lgt=6, 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}
    ```

Content Tabs in Admonitions

NOT COLLAPSIBLE :

Rendering Markdown

Success

Let \(f\) be the function defined on \(\mathbb{R}\) by:

\[ f(x)=x^3-3x^2+2 \]

QuestionSolution

Determine the derivative function \(f'\) of \(f\) on \(\mathbb{R}\).

We have:

\[ f(x)=x^3-3x^2+2 \]

We differentiate each term separately:

\[ \begin{align*} f'(x) &= (x^3)'-(3x^2)'+(2)' \\ &= 3x^2-3\times 2x+0 \\ &= 3x^2-6x \end{align*} \]

We factor:

\[ f'(x)=3x(x-2) \]

Finally:

\[ \boxed{f'(x)=3x(x-2)} \]

QuestionSolution

Deduce the variation table of \(f\) on \(\mathbb{R}\).

The variation table can be found below :

\begin{tikzpicture}[line width=1.2pt, font=\Large]
    \tkzTabInit[lgt=6, 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}

!!! success
    Let $f$ be the function defined on $\mathbb{R}$ by:

    $$
    f(x)=x^3-3x^2+2
    $$

    1. 

        === "Question"
            Determine the derivative function $f'$ of $f$ on $\mathbb{R}$.
        === "Solution"
            We have:

            $$
            f(x)=x^3-3x^2+2
            $$

            We differentiate each term separately:

            $$
            \begin{align*}
            f'(x) &= (x^3)'-(3x^2)'+(2)' \\
                &= 3x^2-3\times 2x+0 \\
                &= 3x^2-6x
            \end{align*}
            $$

            We factor:

            $$
            f'(x)=3x(x-2)
            $$

            Finally:

            $$
            \boxed{f'(x)=3x(x-2)}
            $$

    2. 

        === "Question"
            Deduce the variation table of $f$ on $\mathbb{R}$.
        === "Solution"
            The variation table can be found below :

            ```tikzjax
            \begin{tikzpicture}[line width=1.2pt, font=\Large]
                \tkzTabInit[lgt=6, 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}
            ```

COLLAPSIBLE :

Rendering Markdown

Success

Let \(f\) be the function defined on \(\mathbb{R}\) by:

\[ f(x)=x^3-3x^2+2 \]

QuestionSolution

Determine the derivative function \(f'\) of \(f\) on \(\mathbb{R}\).

We have:

\[ f(x)=x^3-3x^2+2 \]

We differentiate each term separately:

\[ \begin{align*} f'(x) &= (x^3)'-(3x^2)'+(2)' \\ &= 3x^2-3\times 2x+0 \\ &= 3x^2-6x \end{align*} \]

We factor:

\[ f'(x)=3x(x-2) \]

Finally:

\[ \boxed{f'(x)=3x(x-2)} \]

QuestionSolution

Deduce the variation table of \(f\) on \(\mathbb{R}\).

The variation table can be found below :

\begin{tikzpicture}[line width=1.2pt, font=\Large]
    \tkzTabInit[lgt=6, 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}

??? success
    Let $f$ be the function defined on $\mathbb{R}$ by:

    $$
    f(x)=x^3-3x^2+2
    $$

    1. 

        === "Question"
            Determine the derivative function $f'$ of $f$ on $\mathbb{R}$.
        === "Solution"
            We have:

            $$
            f(x)=x^3-3x^2+2
            $$

            We differentiate each term separately:

            $$
            \begin{align*}
            f'(x) &= (x^3)'-(3x^2)'+(2)' \\
                &= 3x^2-3\times 2x+0 \\
                &= 3x^2-6x
            \end{align*}
            $$

            We factor:

            $$
            f'(x)=3x(x-2)
            $$

            Finally:

            $$
            \boxed{f'(x)=3x(x-2)}
            $$

    2. 

        === "Question"
            Deduce the variation table of $f$ on $\mathbb{R}$.
        === "Solution"
            The variation table can be found below :

            ```tikzjax
            \begin{tikzpicture}[line width=1.2pt, font=\Large]
                \tkzTabInit[lgt=6, 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}
            ```

Error test

This block is intentionally broken. It should display the configured error image.

Rendering Markdown

\begin{tikzpicture}
    \draw (0,0) -- (2,2);

```tikzjax
\begin{tikzpicture}
    \draw (0,0) -- (2,2);
```

9. What to try next

Use Advanced Examples for local preambles, TikZ libraries, cache options, and reusable tkz-tab macros.
Use API Reference for all global options and data-* attributes.

Basic Examples

1. Tikz Usage with <script> tags

Direct Insertion in HTML

in MkDocs Admonitions

in MkDocs Content Tabs

Root Content Tabs

Content Tabs in Admonitions

2. TikZ Usage in MkDocs Markdown

Compatible with the <script> tag

tikzjax Code Block Insertion in MkDocs Markdown

in MkDocs Admonitions

in MkDocs Content Tabs

Root Content Tabs

Content Tabs in Admonitions

3. tkz-tab Usage with <script> tags

4. tkz-tab Usage with tikjax Code blocks

tikjax Code Block Insertion in MkDocs Markdown

in MkDocs Content Tabs

Root Content Tabs

Content Tabs in Admonitions

Error test

9. What to try next

1. Tikz Usage with `<script>` tags

Compatible with the `<script>` tag

`tikzjax` Code Block Insertion in MkDocs Markdown

3. tkz-tab Usage with `<script>` tags

4. tkz-tab Usage with `tikjax` Code blocks

`tikjax` Code Block Insertion in MkDocs Markdown