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:
10
src/main.css
10
src/main.css
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user