feat: add CodeMirror syntax highlighting to section page code blocks

- Use CodeMirror in read-only mode for code examples
- Auto-detect CSS vs HTML based on content
- Clean up views when navigating between sections
- Add transparent background to blend with code-block container

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
2026-01-15 11:54:50 +01:00
parent 282580a40a
commit 28bd246c73
2 changed files with 82 additions and 0 deletions

View File

@@ -1911,6 +1911,7 @@ input:checked + .toggle-slider::before {
overflow: hidden;
}
/* Fallback styles for pre/code (before CodeMirror initializes) */
.code-block pre {
margin: 0;
padding: 1rem;
@@ -1925,6 +1926,15 @@ input:checked + .toggle-slider::before {
white-space: pre;
}
/* CodeMirror styles within code blocks */
.code-block .cm-editor {
background: transparent;
}
.code-block .cm-scroller {
overflow-x: auto;
}
.code-caption {
font-size: 0.75rem;
color: var(--light-text);