Display heading level in margin of preview mode just like in Bear

Plugins ideas
1

Can the preview mode have the following things-

  • Display heading level (H1, H2 etc.) in margin in preview mode just like in Bear Notes. See image below as an example
  • Folding headings and bullets in preview mode

2017-12-13-13-02-49
2017-12-13-13-02-492732×2048 230 KB

Keep up the good work devs!

1 Like
2

Could maybe be done with CSS with show/hide elements and a custom CSS.

3

@TroyButtsoupBarnes Check out the “Ursa” theme in Community Themes.

1 Like
4

Yeah. Got it. Thanks!

5

Thanks for the pointer.

Here’s what I’ve done for h1 (and do for h(n):

/* --- Editor Section --- */
.cm-header-1:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H1 '; 
  font-size: 12px;
  color: var(--text-faint)
}
/* to remove some clutters */
.cm-inline-code ~ .cm-header-1::before,
.cm-inline-code ~ .cm-header-2::before, 
.cm-inline-code ~ .cm-header-3::before,
.cm-inline-code ~ .cm-header-4::before,
.cm-inline-code ~ .cm-header-5::before, 
.cm-inline-code ~ .cm-header-6::before
{
  content: '' !important; 
  font-size: 12px;
  color: var(--text-faint)
}


/* --- Preview Section --- */
h1::before
{
  content: 'H1 '; 
  font-size: 12px;
  color: var(--text-faint)
}
1 Like
6

Plugin to display heading level in the gutter (margin):

Folding headings and bullets is available in Settings → Editor

7 Likes
7

Hi @RainbowTrain . One question, how can I make this snippet work for other levels, not only h1.

image

Thanks

8

I’m now using Lapel plug-in :slight_smile:

9

Is there any chance I could get a copy of your css for your headings styles? I think it’ll work much better than the style I wrote for it.

10 
:is(h1) {
  position: relative;
  &::before {
      --indicator-offset: 18px;
      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      /*font-size: var(--font-text-size);*/
      font-size: var(--font-text-size);
      font-size: 12px;
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

:is(h2, h3) {
  position: relative;
  &::before {
      --indicator-offset: 17px;
      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      /*font-size: var(--font-text-size);*/
      font-size: var(--font-text-size);
      font-size: 12px;
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

:is(h4, h5, h6){
  position: relative;
  &::before {
      --indicator-offset: 15px;
      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      /*font-size: var(--font-text-size);*/
      font-size: var(--font-text-size);
      font-size: 12px;
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

/*editing*/
.HyperMD-header {
  position: relative;
  &::before {

      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 16px;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      /*font-size: var(--font-text-size);*/
      font-size: 12px;
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

:is(.HyperMD-header-1, h1) {
  --indicator-offset: 15px;
  --indicator: "H1 ";
}
:is(.HyperMD-header-2, h2) {
  --indicator-offset: 14px;
  --indicator: "H2 ";
}
:is(.HyperMD-header-3, h3) {
  --indicator-offset: 14px;
  --indicator: "H3 ";
}
:is(.HyperMD-header-4, h4) {
  --indicator-offset: 12px;
  --indicator: "H4 ";
}
:is(.HyperMD-header-5, h5) {
  --indicator-offset: 12px;
  --indicator: "H5 ";
}
:is(.HyperMD-header-6, h6) {
  --indicator-offset: 12px;
  --indicator: "H6 ";
}

Hope it helps :slight_smile:

2 Likes