Option to hide frontmatter in live preview

Use case or problem

I mostly use fronmatter only to define aliases for my notes, so I define it once and then usually it just uglifies my note

Proposed solution

Toggle/show frontmatter in live preview via the three dot menu (similar to toggle backlinks in document)

Current workaround (optional)

Css hack - but that doesn’t remove the gutter triangle

div.is-live-preview span.cm-hmd-frontmatter { display: none; }

8 Likes

Is there a way to hide the frontmatter in regular preview mode (not live)? I’d like to be able to do this too.

Settings → Editor → Show frontmatter

1 Like

Hm, thanks, that doesn’t work. That was already off, but it’s still showing up.

This might be down to a theme. If you are using a theme, does it work if you turn the theme off? It if does, you might be able to tweak the theme with some custom CSS. Probably worth checking / eliminating as a possible cause.

Angel :angel:

Good idea, thanks, so I turned off the theme, all snippets and all plugins but it still shows up…

Mmmm, as a test, does it show up if you add some front matter in the help vault?

Angel :angel:

EDIT: Using aliases? This post might help:

Yes, it does :slight_smile:

Curious. Using aliases? If yes, this post might help:

Angel :angel:

I can confirm your workaround works. And I agree with your proposed solution.

Here’s my little CSS to make live preview mode look a bit more like reading view.

Showing here live preview and source view, without and with folds.
frontmatter

.is-live-preview .cm-line .cm-hmd-frontmatter {
  color: var(--text-muted);
}
.is-live-preview .cm-line:not(.cm-active) > .cm-hmd-frontmatter:not(.cm-meta) {
  font-size: 0.8em;
  color: inherit;
  font-weight: 600;
  border-radius: 0.8em;
  padding: 0.2em 0.8em;
  background-color: var(--background-secondary-alt);
}
.is-live-preview .cm-line > .cm-hmd-frontmatter:not(.cm-meta) .cm-selection,
.is-live-preview .cm-line > .cm-hmd-frontmatter:not(.cm-meta).cm-selection {
  color: var(--text-muted);
  background-color: var(--text-selection) !important;
  font-weight: initial;
}

.is-live-preview .cm-line:not(.cm-active) .cm-hmd-frontmatter.cm-def {
  visibility: hidden;
}
.is-live-preview .cm-line .cm-hmd-frontmatter.cm-def .cm-selection {
  visibility: visible;
}
1 Like