Repository navigation
Editor: stop scaling heading sizes in the markdown source view - #628
Merged
Merged
Conversation
SimpleMDE's stylesheet scales headings inside the CodeMirror editing surface to 200%/160%/125%/110%, a leftover from when the browser was also the renderer. #617 moved rendering to the server, so those sizes now only claim to show the result while disagreeing with it, and the line height lurches as you type past a "#". Override them in admin.css, which already owns the editor chrome added by #617 and loads after the SimpleMDE CDN stylesheet, so an equal-specificity rule wins on source order. Measured in Chrome against SimpleMDE 1.11.2: headings go from 32/25.6/20px to 16px, matching the body text, while font-weight:700, cm-strong, cm-em and the code background are left alone. This lives in goblog rather than the themes because themes do not ship admin.css, so every theme picks it up without a release. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The change is a targeted CSS override loaded after SimpleMDE, and it addresses the described UX issue without affecting the server-rendered preview path.
Review effort: Lite
Findings: None
What changed in this PR
Adjusts the admin editor’s Markdown source view styling so CodeMirror headings don’t visually “render” as oversized headings, aligning the typing experience with the server-rendered Preview introduced by #617.
Changes:
- Override SimpleMDE/CodeMirror
.cm-header-1through.cm-header-6rules inadmin.cssto remove heading font-size scaling. - Normalize heading line-height in the editing surface to prevent line-height jumps while typing headings.
| File | Description |
|---|---|
| www/css/admin.css | Overrides SimpleMDE CodeMirror heading styles so the editor source view no longer scales heading sizes/line-height. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Noticed while scoping #624: the editor still styles its content as though the browser were the renderer, which #617 moved to the server.
Problem
SimpleMDE's stylesheet scales headings inside the CodeMirror editing surface:
That was a live preview back when the browser rendered markdown. Now the Preview tab renders through the server, so these sizes are a second rendering that disagrees with the real one — and the line height jumps as soon as you type a
#.Fix
Override the four rules (plus 5 and 6 for completeness) in
www/css/admin.css, which already owns the.editor-tabs/.editor-preview-panechrome from #617 and is loaded after the SimpleMDE CDN stylesheet in_head.html, so an equal-specificity rule wins on source order.SimpleMDE stays. It is what provides paste/drag image upload (via
inline-attachment) and the bold/italic/link toolbar; this only removes its stylesheet's preview pretensions.Verified
Measured computed styles in Chrome against a real SimpleMDE 1.11.2 instance, two otherwise-identical pages differing only by this override:
font-weight:700on headings,cm-strong,cm-emand thecm-commentcode background are all unchanged.Note
This lands in goblog rather than the themes because themes do not ship
admin.css— every theme picks it up with no theme release.🤖 Generated with Claude Code