Using CSS to hide YAML metadata (rough code and help request)

As with several other people in this forum, I have been thinking about how to incorporate metadata into my notes (eg date created, tags etc).

In my use case, I particularly want a low-visibility way to record dates and cited authors. I don’t need it to be in my face in the title (aka zettlekasten), nor do I want it to visibly take up the first five lines of my note.

I had tried just dumping this data at the bottom of my notes, but then I noticed that Obsidian would render YAML metadata as a .cm-hmd-frontmatter class… leading to the potential for a CSS solution.

Inspired by the solution from @death.au in Hide or Truncate URLs in Editor using CSS? I have used the following to slightly neaten up the YAML blocks in edit mode:

div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-frontmatter:not(.cm-formatting) {
    font-size: 0;
}

div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-frontmatter:not(.cm-formatting)::after {
    content: 'metadata';
    font-family: "Source Code Pro", monospace;
    color: var(--text-inline-code);
    font-size: 1rem;
    background-color: var(--background-inline-code);
    border: 1px solid var(--border-inline-code);
    padding: 1px 2px;
}

However, this is not a totally ideal solution, there are at least two ways I would really like to improve it. So I am hoping someone on the forum might have some ideas!

  1. it still takes up as many lines as the size of the YAML block. I understand that Obsidian is treating each line as a separate div with relative position. Is there a way to override this via CSS for frontmatter and force all the divs to stack on top of each other (or just disappear) when the cursor is not there?
  2. preview mode doesn’t seem to recognise frontmatter. It just parses this as a horizontal lines and text (or h2, if no line break). Is there a way to use CSS to control display in preview mode? I very rarely use preview mode, so not a big problem, but the perfectionist in my does not like a loose end.
3 Likes

Reupping this question as I haven’t been able to find it mentioned anywhere else.

To rephrase, how can I (via CSS snippets or otherwise) prevent Obsidian from inserting line breaks in preview mode for YAML frontmatter? Not biggest issue in the world, but very irritating.