diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index ed0353c..c45dae6 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -54,6 +54,7 @@
+
diff --git a/css/prism-theme.css b/css/prism-theme.css
new file mode 100644
index 0000000..e0d988c
--- /dev/null
+++ b/css/prism-theme.css
@@ -0,0 +1,201 @@
+/* Syntax Highlighting — PrismJS theme for indiekit-eleventy-theme
+ Light mode: clean, high-contrast colors
+ Dark mode: scoped under .dark (Tailwind darkMode: "class") */
+
+/* ── Base code block styling ── */
+code[class*="language-"],
+pre[class*="language-"] {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ font-size: 0.875em;
+ line-height: 1.7;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ tab-size: 2;
+ hyphens: none;
+}
+
+pre[class*="language-"] {
+ padding: 1.25em;
+ margin: 1.5em 0;
+ overflow: auto;
+ border-radius: 0.5rem;
+}
+
+:not(pre) > code[class*="language-"] {
+ padding: 0.2em 0.4em;
+ border-radius: 0.25rem;
+ white-space: normal;
+}
+
+/* ── Light Mode ── */
+code[class*="language-"],
+pre[class*="language-"] {
+ color: #24292e;
+}
+
+pre[class*="language-"] {
+ background: #f6f8fa;
+ border: 1px solid #e1e4e8;
+}
+
+:not(pre) > code[class*="language-"] {
+ background: #f6f8fa;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #6a737d;
+}
+
+.token.punctuation {
+ color: #24292e;
+}
+
+.token.namespace {
+ opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #005cc5;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #032f62;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #d73a49;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #d73a49;
+}
+
+.token.function,
+.token.class-name {
+ color: #6f42c1;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #e36209;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+/* Line highlighting */
+.highlight-line-active {
+ background-color: #fffbdd;
+ display: inline-block;
+ width: calc(100% + 2.5em);
+ margin-left: -1.25em;
+ padding-left: 1.25em;
+}
+
+/* ── Dark Mode ── */
+.dark code[class*="language-"],
+.dark pre[class*="language-"] {
+ color: #e1e4e8;
+}
+
+.dark pre[class*="language-"] {
+ background: #161b22;
+ border-color: #30363d;
+}
+
+.dark :not(pre) > code[class*="language-"] {
+ background: #161b22;
+}
+
+.dark .token.comment,
+.dark .token.prolog,
+.dark .token.doctype,
+.dark .token.cdata {
+ color: #8b949e;
+}
+
+.dark .token.punctuation {
+ color: #e1e4e8;
+}
+
+.dark .token.property,
+.dark .token.tag,
+.dark .token.boolean,
+.dark .token.number,
+.dark .token.constant,
+.dark .token.symbol,
+.dark .token.deleted {
+ color: #79c0ff;
+}
+
+.dark .token.selector,
+.dark .token.attr-name,
+.dark .token.string,
+.dark .token.char,
+.dark .token.builtin,
+.dark .token.inserted {
+ color: #a5d6ff;
+}
+
+.dark .token.operator,
+.dark .token.entity,
+.dark .token.url,
+.dark .language-css .token.string,
+.dark .style .token.string {
+ color: #ff7b72;
+}
+
+.dark .token.atrule,
+.dark .token.attr-value,
+.dark .token.keyword {
+ color: #ff7b72;
+}
+
+.dark .token.function,
+.dark .token.class-name {
+ color: #d2a8ff;
+}
+
+.dark .token.regex,
+.dark .token.important,
+.dark .token.variable {
+ color: #ffa657;
+}
+
+.dark .highlight-line-active {
+ background-color: rgba(56, 139, 253, 0.15);
+}
diff --git a/css/tailwind.css b/css/tailwind.css
index 7d0ccb6..e3cd346 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -441,6 +441,11 @@
@apply break-words;
}
+ pre code {
+ word-break: normal;
+ overflow-wrap: normal;
+ }
+
/* Links in content - break long URLs */
.e-content a,
.prose a {
@@ -448,10 +453,10 @@
word-break: break-word;
}
- /* Content containers - prevent horizontal overflow */
+ /* Content containers - clip horizontal overflow but allow pre blocks to scroll */
.e-content,
.prose {
- @apply overflow-x-hidden;
+ overflow-x: clip;
max-width: 100%;
}
diff --git a/eleventy.config.js b/eleventy.config.js
index 0b674db..df4ee89 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -4,6 +4,7 @@ import embedEverything from "eleventy-plugin-embed-everything";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import sitemap from "@quasibit/eleventy-plugin-sitemap";
import markdownIt from "markdown-it";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
import { minify } from "html-minifier-terser";
import { createHash } from "crypto";
import { execFileSync } from "child_process";
@@ -49,6 +50,9 @@ export default function (eleventyConfig) {
});
eleventyConfig.setLibrary("md", md);
+ // Syntax highlighting for fenced code blocks (```lang)
+ eleventyConfig.addPlugin(syntaxHighlight);
+
// RSS plugin for feed filters (dateToRfc822, absoluteUrl, etc.)
// Custom feed templates in feed.njk and feed-json.njk use these filters
eleventyConfig.addPlugin(pluginRss);
diff --git a/package-lock.json b/package-lock.json
index 7aca266..a786c65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,23 +1,25 @@
{
- "name": "rmendes-eleventy-site",
+ "name": "indiekit-eleventy-theme",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
- "name": "rmendes-eleventy-site",
+ "name": "indiekit-eleventy-theme",
"version": "1.0.0",
"dependencies": {
"@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-fetch": "^4.0.1",
"@11ty/eleventy-img": "^6.0.0",
"@11ty/eleventy-plugin-rss": "^2.0.2",
+ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
"@atproto/api": "^0.12.0",
"@chrisburnell/eleventy-cache-webmentions": "^2.2.7",
"@quasibit/eleventy-plugin-sitemap": "^2.2.0",
"eleventy-plugin-embed-everything": "^1.21.0",
"html-minifier-terser": "^7.0.0",
"markdown-it": "^14.0.0",
+ "pagefind": "^1.3.0",
"rss-parser": "^3.13.0"
},
"devDependencies": {
@@ -226,6 +228,19 @@
"url": "https://opencollective.com/11ty"
}
},
+ "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.2.tgz",
+ "integrity": "sha512-T6xVVRDJuHlrFMHbUiZkHjj5o1IlLzZW+1IL9eUsyXFU7rY2ztcYhZew/64vmceFFpQwzuSfxQOXxTJYmKkQ+A==",
+ "license": "MIT",
+ "dependencies": {
+ "prismjs": "^1.30.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/11ty"
+ }
+ },
"node_modules/@11ty/eleventy-utils": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz",
@@ -894,6 +909,84 @@
"node": ">= 8"
}
},
+ "node_modules/@pagefind/darwin-arm64": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.4.0.tgz",
+ "integrity": "sha512-2vMqkbv3lbx1Awea90gTaBsvpzgRs7MuSgKDxW0m9oV1GPZCZbZBJg/qL83GIUEN2BFlY46dtUZi54pwH+/pTQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@pagefind/darwin-x64": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.4.0.tgz",
+ "integrity": "sha512-e7JPIS6L9/cJfow+/IAqknsGqEPjJnVXGjpGm25bnq+NPdoD3c/7fAwr1OXkG4Ocjx6ZGSCijXEV4ryMcH2E3A==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@pagefind/freebsd-x64": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.4.0.tgz",
+ "integrity": "sha512-WcJVypXSZ+9HpiqZjFXMUobfFfZZ6NzIYtkhQ9eOhZrQpeY5uQFqNWLCk7w9RkMUwBv1HAMDW3YJQl/8OqsV0Q==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "freebsd"
+ ]
+ },
+ "node_modules/@pagefind/linux-arm64": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.4.0.tgz",
+ "integrity": "sha512-PIt8dkqt4W06KGmQjONw7EZbhDF+uXI7i0XtRLN1vjCUxM9vGPdtJc2mUyVPevjomrGz5M86M8bqTr6cgDp1Uw==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@pagefind/linux-x64": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.4.0.tgz",
+ "integrity": "sha512-z4oddcWwQ0UHrTHR8psLnVlz6USGJ/eOlDPTDYZ4cI8TK8PgwRUPQZp9D2iJPNIPcS6Qx/E4TebjuGJOyK8Mmg==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@pagefind/windows-x64": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.4.0.tgz",
+ "integrity": "sha512-NkT+YAdgS2FPCn8mIA9bQhiBs+xmniMGq1LFPDhcFn0+2yIUEiIG06t7bsZlhdjknEQRTSdT7YitP6fC5qwP0g==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
"node_modules/@quasibit/eleventy-plugin-sitemap": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@quasibit/eleventy-plugin-sitemap/-/eleventy-plugin-sitemap-2.2.0.tgz",
@@ -3079,6 +3172,23 @@
"node": ">=8"
}
},
+ "node_modules/pagefind": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.4.0.tgz",
+ "integrity": "sha512-z2kY1mQlL4J8q5EIsQkLzQjilovKzfNVhX8De6oyE6uHpfFtyBaqUpcl/XzJC/4fjD8vBDyh1zolimIcVrCn9g==",
+ "license": "MIT",
+ "bin": {
+ "pagefind": "lib/runner/bin.cjs"
+ },
+ "optionalDependencies": {
+ "@pagefind/darwin-arm64": "1.4.0",
+ "@pagefind/darwin-x64": "1.4.0",
+ "@pagefind/freebsd-x64": "1.4.0",
+ "@pagefind/linux-arm64": "1.4.0",
+ "@pagefind/linux-x64": "1.4.0",
+ "@pagefind/windows-x64": "1.4.0"
+ }
+ },
"node_modules/param-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -3478,6 +3588,15 @@
"node": ">= 0.8"
}
},
+ "node_modules/prismjs": {
+ "version": "1.30.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+ "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/prr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
diff --git a/package.json b/package.json
index 39ea7f8..7fe874a 100644
--- a/package.json
+++ b/package.json
@@ -10,23 +10,24 @@
},
"dependencies": {
"@11ty/eleventy": "^3.0.0",
- "html-minifier-terser": "^7.0.0",
- "markdown-it": "^14.0.0",
"@11ty/eleventy-fetch": "^4.0.1",
"@11ty/eleventy-img": "^6.0.0",
"@11ty/eleventy-plugin-rss": "^2.0.2",
+ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
+ "@atproto/api": "^0.12.0",
"@chrisburnell/eleventy-cache-webmentions": "^2.2.7",
"@quasibit/eleventy-plugin-sitemap": "^2.2.0",
- "@atproto/api": "^0.12.0",
"eleventy-plugin-embed-everything": "^1.21.0",
- "rss-parser": "^3.13.0",
- "pagefind": "^1.3.0"
+ "html-minifier-terser": "^7.0.0",
+ "markdown-it": "^14.0.0",
+ "pagefind": "^1.3.0",
+ "rss-parser": "^3.13.0"
},
"devDependencies": {
- "tailwindcss": "^3.4.0",
+ "@tailwindcss/typography": "^0.5.0",
+ "autoprefixer": "^10.4.0",
"postcss": "^8.4.0",
"postcss-cli": "^11.0.0",
- "autoprefixer": "^10.4.0",
- "@tailwindcss/typography": "^0.5.0"
+ "tailwindcss": "^3.4.0"
}
}