Indent based on heading level

I was thinking of going down a rabbit hole to see if I could work on some styles to indent heading (and content under that heading) based on the level. So, if a level 2 heading (##) is below a level 1 heading (#), it would be indented in a set distance from the left margin. Likewise if that level 2 had a level 3 beneath it, it would also be indented a set distance.

Is this something feasible to achieve given the framework available to me? Also, are there any hooks I should be aware of that might make this easier?

Hum… not sure.

In case you don’t already know the best place to experiment would be Window > Software Development Kit > Run Editor. And then type in an example document and start messing with style rules. Your user.less is loaded into that SDK editor, click the Refresh button to reload in any stylesheet changes that you make.

Here’s a start. I’m not sure if it can be turned into a final solution or not:

@levelPadding: 20px;

pre[cm-level="1"].cm-heading {
  padding-left: @levelPadding * 0;
}

pre[cm-level="2"].cm-heading {
  padding-left: @levelPadding * 1;
}

pre[cm-level="3"].cm-heading {
  padding-left: @levelPadding * 2;
}

pre[cm-level="4"].cm-heading {
  padding-left: @levelPadding * 3;
}

pre[cm-level="5"].cm-heading {
  padding-left: @levelPadding * 4;
}

pre[cm-level="6"].cm-heading {
  padding-left: @levelPadding * 5;
}

This is targeting just the headings and seems to work, without much testing. But I’m not sure that it’s possible to also get the content to indent. Maybe if you write a plugin to add owning headings indent level to each bit of content… but that’s getting pretty deep into things that may or may not work.