feat: Add support for TikZJax diagrams.#337
feat: Add support for TikZJax diagrams.#337LukeBriton wants to merge 3 commits intooleeskild:mainfrom
Conversation
|
I haven't accomplished the function to invert font/arrow color (or at least black ones?) for dark themes as MathJax formulae would be, maybe that's some TODO. |
oleeskild
left a comment
oleeskild
left a comment
There was a problem hiding this comment.
Nice, thank you! I've made comments about some stuff I'd like to see fixed before merging it in.
.eleventy.js
Outdated
| const { parse } = require("node-html-parser"); | ||
| const htmlMinifier = require("html-minifier-terser"); | ||
| const pluginRss = require("@11ty/eleventy-plugin-rss"); | ||
| const tex2svg = require("node-tikzjax").default; |
There was a problem hiding this comment.
Consider lazy-loading this inside the transform on first use, so the TeX engine isn't loaded on builds with no TikZ blocks.
There was a problem hiding this comment.
| return content; | ||
| }); | ||
|
|
||
| eleventyConfig.addTransform("render-tikzjax", (() => { |
There was a problem hiding this comment.
This is registered after htmlMinifier, so in production the minifier runs first. Consider moving it before htmlMinifier to avoid fragile ordering.
There was a problem hiding this comment.
| }); | ||
|
|
||
| eleventyConfig.addTransform("render-tikzjax", (() => { | ||
| let tikzQueue = Promise.resolve(); |
There was a problem hiding this comment.
Add a comment explaining why rendering is serialized (TeX engine likely isn't concurrency-safe), since the promise chain pattern is non-obvious.
SOmething like: // Serialize renders — the TeX engine doesn't support concurrent invocations
There was a problem hiding this comment.
.eleventy.js
Outdated
| const svg = await run; | ||
|
|
||
| const svgElement = parse(svg) | ||
| .querySelector("svg") // after zooming some pictures could go wrong, |
There was a problem hiding this comment.
querySelector("svg") can return null if tex2svg produces unexpected output. Add a null check before calling .setAttribute().
There was a problem hiding this comment.
.eleventy.js
Outdated
| console.warn("\n[TikZJax] render failed at:", outputPath); | ||
| console.warn("[TikZJax] TeX source (first 400 chars):\n", texSource.slice(0, 400)); | ||
| console.warn("[TikZJax] Warn:", e); | ||
| block.replaceWith(`<pre><code class="language-tikz">TikZ render failed. See build log.\n\n${(texSource)}</code></pre>`); |
There was a problem hiding this comment.
texSource is inserted into HTML unescaped. If the TeX source contains < or & and rendering fails, they'll be interpreted as HTML. Either escape it, or log it to the console instead.
There was a problem hiding this comment.
2 participants
As requested in
utilizing prinsss/node-tikzjax, now Digital Garden supports TikZJax diagrams:
Check out https://mathematics-deployed.vercel.app/TikZJax/ for more examples, code of which can be found in https://github.com/LukeBriton/mathematics-deployed/blob/main/src/site/notes/TikZJax.md.
PS: Some commutative diagrams from the package
tikz-cdare just that small, see the case of artisticat1/obsidian-tikzjax#42. I have tried to zoom them bigger, however that would result in other TikZ diagrams being overlapped or partly invisible.