cm-header-* margin/padding/height ?


Using markdown mode I would like to apply styling to cm-header-1 … 2 …3.

For # My Title as Header 1 I would lie to apply a margin-bottom property but it seems that CodeMirror-lines are fixed, so the margin is applied but following line does not move down.

Is their a way/hack to go this way ? Maybe in markdown.js ?


You simply can’t have margins on lines currently – it’ll screw up the positioning as you noticed. You could add padding, though the cursor will extend into that, which might also look silly.

“You could add padding, though the cursor will extend into that”

Padding would be fine (as long as it does not scraw positionning, and the cursor extending into it wouldn’t be a problem.

But still, same effect with padding, right and left are ok, but padding-bottom has the same effect, lines are note moving.
Any tip ?

Thanks a lot,

Set up a demo on jsbin or so. I can’t really guess what you might be doing.

FWIW, I have working padding on headers at

The non-obvious trick is that you have to apply padding to the line (pre), not the span.
(Marijn, this is probably worth mentioning in the doc…)
Markdown mode (as most/all CM modes) only styles spans.
I didn’t want to fork markdown.js but there are 2 easy outside ways to lift the styles to the line:

  1. renderLine event
  2. wrapping the token() function to return line-... styles

I went with the latter:

(ignore the shaOrIssueRE noise there, I’m mixing an unrelated kludge)