Different fonts for h1/h2/h3...

[cben]

No description provided.

[cben]

Fixed by 4a9743d, but it wouldn't hurt to check what sizes Latex uses for headings and try to match those.

[cben]

The line-height values I'm using to fake top/bottom margins (which can't be set on a line as long as markdown mode styles spans and not the whole line) are broken:

• they are arbitrary and probably ugly. cf. http://jerseywebdesigner.com/stylesheet-of-html-header-tags for H1..H6 margins used by browsers.
• being expressed in ems, they already scale with font-size; decreasing them creates a double effect.
  It'd make sense to have all the same; moreover browsers actually use a reverse progression for H1..H6!
• if header gets wrapped, line-height causes large spacing between its lines :-(
• the preffered way to set line-height is a pure number rather than ems.

more reading: http://ux.stackexchange.com/questions/35270/is-there-an-optimal-font-size-line-height-ratio
but line-height can't be the solution.

• display: inline-block makes margins work but screws with CM's cursor positioning (esp. if header line wraps)
• styling the line rather than the span (by mode returning line-cm-header instead of header) also breaks cursor positioning as soon as margins are applied: https://rawgithub.com/cben/CodeMirror/fd48741e75f2ba288375dfd1c3e66b0537f33327/demo/variableheight.html

---

P.S. Displaying margins on header lines would become unnecessary—even harmful—if they empty lines were required around headers.

Extension: blank_before_header
Standard markdown syntax does not require a blank line before a header. Pandoc does require this (except, of course, at the beginning of the document).

[cben]

Instead of line-height, could use addLineWidget() to create gaps. But that's ugly and not worth it.
More practically, could set line-height only on the leading # (once separate styling lands in CM) to avoid impacting wrapped lines.
Still leaning towards requiring/encouraging empty lines around headers.

[cben]

Styling .cm-header:first-letter has no effect.
Styling .cm-header:first-line { line-height: 150%; vertical-align: bottom; } almost works (vertical-align is needed to avoid gap between first and second line if header wraps. But math inside headers ignores the alignment (so floats above the line) and interrupts the span so you might have multiple "first" lines.

However styling the <pre> instead of the span (by addLineClass() of 'text' type or token() returning 'line-header') works if I use padding rather than margins:
https://rawgithub.com/cben/CodeMirror/928a487e4ec72b52e2f17c320e13b198ac34cc2e/demo/variableheight.html