From afb33e26a68b59907e39d449a220b5b8a53037c0 Mon Sep 17 00:00:00 2001 From: Stephen Donahue Date: Sun, 28 Jun 2026 01:20:01 +0000 Subject: [PATCH] Fix column overflow and render math with KaTeX - minmax(0,1fr)+min-width:0 and pre-wrap so a long fenced line no longer blows out the grid - build-time KaTeX via @vscode/markdown-it-katex; ship katex CSS+fonts and link in layouts --- .eleventy.js | 12 ++++++++++++ _includes/base.njk | 1 + _includes/column.njk | 1 + css/style.css | 11 ++++++++++- package.json | 4 +++- yarn.lock | 26 ++++++++++++++++++++++++++ 6 files changed, 53 insertions(+), 2 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 0e65e05..9ca6496 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,5 +1,6 @@ const Image = require("@11ty/eleventy-img"); const path = require("path"); +const markdownItKatex = require("@vscode/markdown-it-katex").default; function imageShortcode(src, alt, sizes = "100vw") { const inputPath = path.join("img", src); @@ -54,6 +55,17 @@ module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("img"); eleventyConfig.addPassthroughCopy("favicon.svg"); + // KaTeX: render $$...$$ at build time into static markup. Ship katex.min.css + // plus its fonts/ as a sibling so the stylesheet's url(fonts/...) resolves. + eleventyConfig.addPassthroughCopy({ + "node_modules/katex/dist/katex.min.css": "css/katex.min.css", + "node_modules/katex/dist/fonts": "css/fonts", + }); + + eleventyConfig.amendLibrary("md", (md) => { + md.use(markdownItKatex, { throwOnError: false, errorColor: "#cc0000" }); + }); + eleventyConfig.addShortcode("image", imageShortcode); eleventyConfig.addShortcode("heroImage", heroImageShortcode); diff --git a/_includes/base.njk b/_includes/base.njk index 00ad2ca..07f0f60 100644 --- a/_includes/base.njk +++ b/_includes/base.njk @@ -6,6 +6,7 @@ {% if title %}{{ title }} — un:prompted{% else %}un:prompted{% endif %} +
diff --git a/_includes/column.njk b/_includes/column.njk index 26f60cd..9ee8197 100644 --- a/_includes/column.njk +++ b/_includes/column.njk @@ -6,6 +6,7 @@ {{ title | stripMarkdown }} — un:prompted +
diff --git a/css/style.css b/css/style.css index 46abafb..618ee1d 100644 --- a/css/style.css +++ b/css/style.css @@ -64,10 +64,17 @@ a:hover { .site-layout { display: grid; - grid-template-columns: 1fr var(--sidebar-width); + grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: 3rem; } +/* Let the main column shrink below its content's intrinsic width so a long + line inside a 
 scrolls within the box instead of blowing out the grid. */
+.content {
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
 /* main content */
 
 .content h1 {
@@ -151,6 +158,8 @@ a:hover {
   background: var(--color-pre-bg);
   padding: 1rem;
   overflow-x: auto;
+  white-space: pre-wrap;   /* soft-wrap long lines (these fences hold prose) */
+  overflow-wrap: anywhere; /* break a hypothetical unbroken token too */
   margin-bottom: 1rem;
   font-size: 0.85rem;
   line-height: 1.5;
diff --git a/package.json b/package.json
index a1ed43f..833b74c 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
   },
   "dependencies": {
     "@11ty/eleventy": "^3.0.0",
-    "@11ty/eleventy-img": "^5.0.0"
+    "@11ty/eleventy-img": "^5.0.0",
+    "@vscode/markdown-it-katex": "^1.1.2",
+    "katex": "^0.17.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index dc46f5c..2c50629 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -281,6 +281,13 @@
   dependencies:
     escape-string-regexp "^5.0.0"
 
+"@vscode/markdown-it-katex@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vscode/markdown-it-katex/-/markdown-it-katex-1.1.2.tgz#6ec355c5ec82d019f13a511e2363525384c91155"
+  integrity sha512-+4IIv5PgrmhKvW/3LpkpkGg257OViEhXkOOgCyj5KMsjsOfnRXkni8XAuuF9Ui5p3B8WnUovlDXAQNb8RJ/RaQ==
+  dependencies:
+    katex "^0.16.4"
+
 a-sync-waterfall@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz#75b6b6aa72598b497a125e7a2770f14f4c8a1fa7"
@@ -430,6 +437,11 @@ commander@^5.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -806,6 +818,20 @@ junk@^3.1.0:
   resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
   integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
 
+katex@^0.16.4:
+  version "0.16.47"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.47.tgz#0a13a42c2deb4f74e61f162d440b9165a548030f"
+  integrity sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==
+  dependencies:
+    commander "^8.3.0"
+
+katex@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.17.0.tgz#536e25874ec9ac8728e3b4b7bf7fec6557b7dbf4"
+  integrity sha512-Vdw0ATsQ9V+LuegM/BTwQqV/6cTl5lbGcIrU+BCgLxyf6bo38ybOr372tuSIxir3CN720flu1meYR6XzNMwQnw==
+  dependencies:
+    commander "^8.3.0"
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"