Option to hide frontmatter in live preview

Feature archive
1

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

2

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

3

Settings → Editor → Show frontmatter

4

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

5

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:

6

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

7

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:

8

Yes, it does :slight_smile:

9

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

Angel :angel:

10

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

11

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

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

13

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?

14

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

15

The plugin “Toggle meta YAML” does this.

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

16

Perfect! Thank you!

17

Nice! Gonna try it tomorrow.

18

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

This is implemented with the hidden option.