Gutter border for new editor, source mode

Share & showcase
,
1

The new editor broke my gutter border. I enter a fair amount of code and nested HTML. The gutter border helps me see how far a line is indented, which in turn helps me see the structure of my code and avoid nesting-related typos.

The new editor, or the new editor in source mode at any rate, changed the class of Code Mirror gutters and added CSS to make sure the new gutters do not display border. The new editor also shifted some icons for Folding text into the gutter space.

This is what I have hacked together so far for restoring the gutter and gutter border. Are there more effective selectors for the folding UI elements? Are there other folding icons that encroach on the gutter space? Any recommendations for restoring some of the space between headers that my changes broke?

Before and after

image image

Without repositioning the folding icons

image

CSS

/* Make gutters visible so that it is easier to read leading spaces */
.CodeMirror-gutters,
.markdown-source-view.mod-cm6 .cm-gutters {
  border-right: solid 1px var(--scrollbar-bg) !important;
}

/* Move folding icons off gutter space */
.markdown-source-view.mod-cm6 .HyperMD-header-1 .cm-fold-indicator,
.markdown-source-view.mod-cm6 .HyperMD-header-2 .cm-fold-indicator,
.markdown-source-view.mod-cm6 .HyperMD-header-3 .cm-fold-indicator,
.markdown-source-view.mod-cm6 .HyperMD-header-4 .cm-fold-indicator,
.markdown-source-view.mod-cm6 .HyperMD-header-5 .cm-fold-indicator,
.markdown-source-view.mod-cm6 .HyperMD-header-6 .cm-fold-indicator {
  font-size: 1.12em;
  right: -1px;
}
.HyperMD-codeblock .cm-fold-indicator {
  right: -2.2px;
}

/* Realign folding icons verticaly with headings */ 
.markdown-source-view.mod-cm6 .HyperMD-header-1 .cm-fold-indicator {
  top: -0.36em;
}
.markdown-source-view.mod-cm6 .HyperMD-header-2 .cm-fold-indicator {
  top: -0.20em;
}
.markdown-source-view.mod-cm6 .HyperMD-header-3 .cm-fold-indicator {
  top: -0.13em;
}
.markdown-source-view.mod-cm6 .HyperMD-header-4 .cm-fold-indicator {
  top: -0.12em;
}
.markdown-source-view.mod-cm6 .HyperMD-header-5 .cm-fold-indicator {
  top: -0.05em;
}
.markdown-source-view.mod-cm6 .HyperMD-header-6 .cm-fold-indicator {
  top: -0.02em;
}