Syntax Highlighting in metadata / frontmatter?

Help
1

Things I have tried

I searched for plugins, found one that does syntax highlighting of code blocks, but seemingly not for the frontmatter.

What I’m trying to do

I’d like to have the frontmatter information neater and more readable.
I saw in some YT videos (i.e. from Nicole van der Hoeven) that in her notes the frontmatter field-names are in different colors than the field-values.

How can I achieve that?
Would I have to create a specific CSS-snippet for that?
If so, what would be the syntax?

1 Like
2

Here’s the CSS to change the color of the various YAML elements:

/* color YAML value text */
span.cm-meta.cm-hmd-frontmatter + span.cm-hmd-frontmatter {
    color: blue;
}

/* color YAML value - if it's a number */
span.cm-number.cm-hmd-frontmatter {
    color: pink !important;
}

/* color YAML key text */
span.cm-atom.cm-hmd-frontmatter {
    color: green;
}

/* color YAML separator text */
span.cm-meta.cm-hmd-frontmatter {
    color: red;
}

Ends up looking something like this:

4 Likes
3

Great, that does the job!
If only I now manage to find out, how to change the color i.e. from blue to orange… :wink:

1 Like
4

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