Hiding frontmatter

General
10

So I’ve also come up with a solution to this that creates a command to hide the frontmatter and tags while using the vertical menu from Mr. Red.

First I should say I organize all of my notes by tags, which I put at the end of paragraphs and pages and everywhere – tags all over the place. So when I view notes, I like to hide the front matter and those tags so it’s visually clean with just the text I want to read. The code below is for both tags and frontmatter, but you can see they’re clearly separated, so if you only want to hide frontmatter, just delete the tags sections.

I’ll admit I’m not a programmer, so I’m not sure how elegant this solution is – it works well, though!

I first created a page in my library to input the space script:

silverbullet.registerCommand({name: "Toggle UI Elements"}, async () => {
  // Get the body element
  const body = document.body;
  
  // Toggle both classes
  body.classList.toggle("hide-tags");
  body.classList.toggle("hide-frontmatter");
  
  // Show notification
  await editor.flashNotification("UI elements visibility toggled");
});

In SETTINGS, add:

/* Styles for hidden elements */
body.hide-tags .sb-hashtag {
  display: none;
}

body.hide-frontmatter .sb-frontmatter {
  display: none;
}

Then in the space-config for the vertical menu settings, I added:

  • icon: eye
    command: “{[Toggle UI Elements]}”
    description: “Toggle UI visibility (tags & frontmatter)”

If you don’t want to add to the menu, you can just run it as a regular command.

1 Like