mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
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:
@@ -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%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user