Ionaru / Ionaru/easy-markdown-editor

Option to disable heading font-size scaling in editor (cm-header-* override)

Open
#630 0 comments 0 reactions 0 assignees View on GitHub
Improvement
Dominant language
JavaScript
Stars
3.1k
Forks
363
PR merge metrics
No merged PRs in 30d

Description

**Is your feature request related to a problem? Please describe.**
When writing headings in the editor (e.g. # Title), EasyMDE scales up the font size via CodeMirror's cm-header-1 through cm-header-6 classes. In admin forms where the editor is embedded alongside other fields, this is visually jarring — a heading typed mid-form suddenly renders at 2–3× the surrounding font size, making the editor feel broken rather than helpful.

**Describe the solution you'd like**
A configuration option to disable font-size scaling for headings in the editor area, while keeping the Preview rendering intact. Something like:

new EasyMDE({
editorStyling: { scaleHeadings: false }
})

**Describe alternatives you've considered**
CSS override on the consuming side:

.EasyMDEContainer .CodeMirror .cm-header-1,
.EasyMDEContainer .CodeMirror .cm-header-2,
.EasyMDEContainer .CodeMirror .cm-header-3,
.EasyMDEContainer .CodeMirror .cm-header-4,
.EasyMDEContainer .CodeMirror .cm-header-5,
.EasyMDEContainer .CodeMirror .cm-header-6 {
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

This works but requires the consumer to know the internal CodeMirror class names, which is a leaky abstraction.

**Additional context**
Related but distinct: #589 (WYSIWYG symbol styling) and #432 (hiding markdown syntax entirely). This request is only about font-size scaling of heading lines in the editor — not about hiding # symbols or disabling syntax highlighting.

Contributor guide

Open the contributing guide

Research direction

Start by locating the EasyMDE option handling and the CodeMirror cm-header-1 through cm-header-6 styling. Add a configuration path for disabling heading font-size scaling while preserving the existing Preview rendering, then verify that enabled and disabled modes produce the expected editor appearance without hiding Markdown syntax.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
57/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.