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

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

Keep up the good work devs!

1 Like

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

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

1 Like

Yeah. Got it. Thanks!

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

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

Folding headings and bullets are available in Settings → Editor

1 Like