cm-header-* margin/padding/height ?

matthieubellon · November 27, 2014, 6:22am

Hi,

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 ?

Thanks
Matt

marijn · November 27, 2014, 9:40pm

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.

matthieubellon · November 28, 2014, 10:43am

“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,
Matt

marijn · December 1, 2014, 4:50pm

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

cben · December 14, 2014, 9:35pm

FWIW, I have working padding on headers at http://mathdown.net/?doc=demo-folding
https://github.com/cben/mathdown/blob/gh-pages/mathdown.css#L52-L53

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:

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

I went with the latter:

github.com

cben/mathdown/blob/gh-pages/mathdown.js#L106


    name: "leadingspace"
  });
});


// To add vertical margin to headers, the .cm-header[N] classes must apply to
// <pre> and not the <span>.  Wrap the mode to achieve this.
CodeMirror.defineMode("gfm_header_line_classes", function(cmConfig, modeCfg) {
modeCfg.name = "gfm";
modeCfg.highlightFormatting = true;
var mode = CodeMirror.getMode(cmConfig, modeCfg);
var origToken = mode.token;
// We use GFM mostly for URLs but don't want GitHub-specific formatting that
// makes `0123456789` a link.  TODO: add mode option of gfm.js.
var shaOrIssueRE = /^(?:[a-zA-Z0-9\-_]+\/)?(?:[a-zA-Z0-9\-_]+@)?(?:[a-f0-9]{7,40})|b^(?:[a-zA-Z0-9\-_]+\/)?(?:[a-zA-Z0-9\-_]+)?#[0-9]+$/;
mode.token = function(stream, state) {
  var classes = origToken(stream, state) || "";
  if (shaOrIssueRE.test(stream.current())) {
    classes = classes.replace(/(^| )link( |$)/, " ");
  }
  classes = classes.replace(/(^| )(header\S*)/g, "$1line-cm-$2");
  return /^\s*$/.test(classes) ? null : classes;

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