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!
- 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?
- 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.