fix tikzjax (#3477)

Fixes #3216 – TikZJax not working.

1. Changing SHA simply doesn't work, `window.tikzjax` is undefined and
it doesn't render anything.
2. I switched to the JS distributed by
[benrbray/tikzjax](https://github.com/benrbray/tikzjax/tree/develop),
added under `assets.js` to prevent future issues.
3. Documents now require to start with `\begin{document}`, should be a
simple fix.

<img width="789" height="341" alt="Screenshot 2026-01-24 at 1 10 39 PM"
src="https://github.com/user-attachments/assets/8272471d-df94-4118-a726-00ed09dcf1e8"
/>
<img width="780" height="380" alt="Screenshot 2026-01-24 at 1 06 13 PM"
src="https://github.com/user-attachments/assets/11284661-de15-4d57-a1d9-4959f562f826"
/>

_includes/distill_scripts.liquid

@@ -120,12 +120,7 @@
 
 {% if page.tikzjax %}
   <!-- Tikzjax -->
-  <script
+  <script defer src="{{ '/assets/js/tikzjax.min.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
-    defer
-    src="https://tikzjax.com/v1/tikzjax.js"
-    integrity="sha256-+1qyucCXRZJrCg3lm3KxRt/7WXaYhBid4/1XJRHGB1E="
-    crossorigin="anonymous"
-  ></script>
 {% endif %}
 
 {% if page.typograms %}

_includes/head.liquid

@@ -193,5 +193,5 @@
 {% endif %}
 
 {% if page.tikzjax %}
-  <link defer rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
+  <link defer rel="stylesheet" type="text/css" href="{{ '/assets/css/tikzjax.min.css' | relative_url | bust_file_cache }}">
 {% endif %}

_includes/scripts.liquid

@@ -139,12 +139,7 @@
 
 {% if page.tikzjax %}
   <!-- Tikzjax -->
-  <script
+  <script defer src="{{ '/assets/js/tikzjax.min.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
-    defer
-    src="https://tikzjax.com/v1/tikzjax.js"
-    integrity="sha256-+1qyucCXRZJrCg3lm3KxRt/7WXaYhBid4/1XJRHGB1E="
-    crossorigin="anonymous"
-  ></script>
 {% endif %}
 
 {% if page.typograms %}

_posts/2018-12-22-distill.md

@@ -1210,48 +1210,52 @@ The rendered output shows a clean and simple bar chart with a hover effect：
 
 ```markdown
 <script type="text/tikz">
-\begin{tikzpicture}
+\begin{document}
-    \filldraw[fill=cyan!10, draw=blue, thick] (0,0) circle (2cm);
+  \begin{tikzpicture}
+      \filldraw[fill=cyan!10, draw=blue, thick] (0,0) circle (2cm);
 
-    \draw[->, thick] (-2.5,0) -- (2.5,0) node[right] {Re};
+      \draw[->, thick] (-2.5,0) -- (2.5,0) node[right] {Re};
-    \draw[->, thick] (0,-2.5) -- (0,2.5) node[above] {Im};
+      \draw[->, thick] (0,-2.5) -- (0,2.5) node[above] {Im};
 
-    \draw[->, thick, color=purple] (0,0) -- (1.5,1.5);
+      \draw[->, thick, color=purple] (0,0) -- (1.5,1.5);
-    \node[color=purple] at (1.1, 1.7) {$e^{i\theta}$};
+      \node[color=purple] at (1.1, 1.7) {$e^{i\theta}$};
 
-    \draw[thick] (0.7,0) arc (0:45:0.7);
+      \draw[thick] (0.7,0) arc (0:45:0.7);
-    \node at (0.9, 0.3) {$\theta$};
+      \node at (0.9, 0.3) {$\theta$};
 
-    \draw[dashed, color=gray] (1.5,1.5) -- (1.5,0) node[below, black] {$\cos \theta$};
+      \draw[dashed, color=gray] (1.5,1.5) -- (1.5,0) node[below, black] {$\cos \theta$};
-    \draw[dashed, color=gray] (1.5,1.5) -- (0,1.5) node[left, black] {$\sin \theta$};
+      \draw[dashed, color=gray] (1.5,1.5) -- (0,1.5) node[left, black] {$\sin \theta$};
-    \node at (2.2, 0) [below] {1};
+      \node at (2.2, 0) [below] {1};
-    \node at (0, 2.2) [left] {$i$};
+      \node at (0, 2.2) [left] {$i$};
-    \node at (1.5,1.5) [above right, color=blue] {$(\cos \theta \, \sin \theta)$};
+      \node at (1.5,1.5) [above right, color=blue] {$(\cos \theta \, \sin \theta)$};
-\end{tikzpicture}
+  \end{tikzpicture}
+\end{document}
 </script>
 ```
 
 The rendered output is shown below, displayed as a vector graphic：
 
 <script type="text/tikz">
-\begin{tikzpicture}
+\begin{document}
-    \filldraw[fill=cyan!10, draw=blue, thick] (0,0) circle (2cm);
+  \begin{tikzpicture}
+      \filldraw[fill=cyan!10, draw=blue, thick] (0,0) circle (2cm);
 
-    \draw[->, thick] (-2.5,0) -- (2.5,0) node[right] {Re};
+      \draw[->, thick] (-2.5,0) -- (2.5,0) node[right] {Re};
-    \draw[->, thick] (0,-2.5) -- (0,2.5) node[above] {Im};
+      \draw[->, thick] (0,-2.5) -- (0,2.5) node[above] {Im};
 
-    \draw[->, thick, color=purple] (0,0) -- (1.5,1.5);
+      \draw[->, thick, color=purple] (0,0) -- (1.5,1.5);
-    \node[color=purple] at (1.1, 1.7) {$e^{i\theta}$};
+      \node[color=purple] at (1.1, 1.7) {$e^{i\theta}$};
 
-    \draw[thick] (0.7,0) arc (0:45:0.7);
+      \draw[thick] (0.7,0) arc (0:45:0.7);
-    \node at (0.9, 0.3) {$\theta$};
+      \node at (0.9, 0.3) {$\theta$};
 
-    \draw[dashed, color=gray] (1.5,1.5) -- (1.5,0) node[below, black] {$\cos \theta$};
+      \draw[dashed, color=gray] (1.5,1.5) -- (1.5,0) node[below, black] {$\cos \theta$};
-    \draw[dashed, color=gray] (1.5,1.5) -- (0,1.5) node[left, black] {$\sin \theta$};
+      \draw[dashed, color=gray] (1.5,1.5) -- (0,1.5) node[left, black] {$\sin \theta$};
-    \node at (2.2, 0) [below] {1};
+      \node at (2.2, 0) [below] {1};
-    \node at (0, 2.2) [left] {$i$};
+      \node at (0, 2.2) [left] {$i$};
-    \node at (1.5,1.5) [above right, color=blue] {$(\cos \theta \, \sin \theta)$};
+      \node at (1.5,1.5) [above right, color=blue] {$(\cos \theta \, \sin \theta)$};
-\end{tikzpicture}
+  \end{tikzpicture}
+\end{document}
 </script>
 
 ---

_posts/2023-12-12-tikzjax.md

@@ -11,9 +11,11 @@ tikzjax: true
 This is an example post with TikZ code. TikZJax converts script tags (containing TikZ code) into SVGs.
 
 <script type="text/tikz">
-\begin{tikzpicture}
+\begin{document}
-    \draw[red,fill=black!60!red] (0,0) circle [radius=1.5];
+    \begin{tikzpicture}
-    \draw[green,fill=black!60!green] (0,0) circle [x radius=1.5cm, y radius=10mm];
+        \draw[red,fill=black!60!red] (0,0) circle [radius=1.5];
-    \draw[blue,fill=black!60!blue] (0,0) circle [x radius=1cm, y radius=5mm, rotate=30];
+        \draw[green,fill=black!60!green] (0,0) circle [x radius=1.5cm, y radius=10mm];
-\end{tikzpicture}
+        \draw[blue,fill=black!60!blue] (0,0) circle [x radius=1cm, y radius=5mm, rotate=30];
+    \end{tikzpicture}
+\end{document}
 </script>