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

6 Likes