Frontmatter HTML div block and css class for first and second dashes

Feature requests
,
1

Use case or problem

For the moment, styling the front matter (mainly in LP) is pretty difficult because we can style each block or the block in this entirety. Also, we can style the first --- and the last ---

Proposed solution

  • A html div block that include the front matter, starting from --- and ending with the second ---.
  • A css class for the first --- and the last ---

This will allow, for example, to :

  • Create border, background color
  • Add things before or after (icons)
  • Display the entire frontmatter on hover (not line by line) / active line, eventually create “click to open” with css or plugin ?

Current workaround (optional)

Fight with CSS and all the tag to style the frontmatter.

Related feature requests (optional)

1 Like
2

i’m +1 this to show interests.

also, i think adding css class for those frontmatter lines should be non-disruptive. with that at least theme dev can minimally style 'em.

3

+1
I think it would make a lot of sense.

4

+1 as well, trying to do exactly this.

5

Partial solution/workaround via a CSS snippet for people:

.markdown-source-view .cm-line:has(> .cm-hmd-frontmatter) {
  background-color: red;
}

Targets the lines individually, so doing borders is tricky. Could do a bit of nth child matching to get a bit more flexibility, but would still be a bit limited - for example, couldn’t do a hide/show easily…

EDIT: just realised that this is what the original post is implying in the first place. Leaving it here anyway in case it’s useful for someone looking for it.

1 Like