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; }

17 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.

1 Like

Settings → Editor → Show frontmatter

3 Likes

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:

1 Like

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;
}
10 Likes

This worked better than anything else. Never mind for the gutter space. :slight_smile:

Thank you SO much for that code! Works like a treat!
I have a question tho, my CSS skills are less than functional … if I’d want the frontmatter section to be collapsed by default… what should I add?

I don’t think that can be done from CSS unfortunately, but someone else might have an idea.

2 Likes

The plugin “Toggle meta YAML” does this.

You can pair it with the commander plugin to make it a clickable option in your workspace.

3 Likes

Perfect! Thank you!

1 Like

Nice! Gonna try it tomorrow.

With properties introduced in Obsidian 1.4, this is largely obsolete.

For styling properties I recommend this:

This is what I use now to achieve a similar effect as before:

/* no heading, no folding */
.metadata-properties-heading {
  display: none;
}
/* no add button */
.metadata-container .metadata-add-button {
  display: none;
}

/* no bottom margin / padding (where it meets the note) */
body {
  --metadata-padding: var(--size-4-2) 0 0 0;
}
.metadata-container {
  margin-block-end: 0;
}

/* pill-like */
.metadata-property[data-property-key='aliases'] .multi-select-pill {
  font-weight: var(--font-semibold);
  background-color: var(--color-base-30);
  padding: var(--tag-padding-y) var(--tag-padding-x);
}

This is implemented with the hidden option.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.