feat: add syntax highlighting for code blocks

Integrates @11ty/eleventy-plugin-syntaxhighlight (PrismJS) for
build-time syntax highlighting of fenced code blocks. Includes
a custom GitHub-inspired theme with dark mode support (.dark class).

All existing articles with triple-backtick code blocks will
automatically get highlighting on next Eleventy rebuild.

Also fixes overflow-x: hidden on .prose/.e-content that was
clipping scrollable code blocks — changed to overflow-x: clip.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-11 10:21:31 +01:00
parent 2b3e51042c
commit ddbc983505
6 changed files with 343 additions and 12 deletions

View File

@@ -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%;
}