Hiding YAML in Edit Mode

[danielw]

THANK YOU SO SO MUCH! I was just getting started with YAML and my main hesitancy is that I hate how it looks and how it pushes everything down. I now have a hotkey to hide and show it. Thanks!

[dryice]

No worries,

How are you using YAML I’m still experimenting with it. But also wondering if I’ll change in the future to collapsed callouts instead.

Here is my current general note template

<%"---"%>
aliases: 
date created: <% tp.file.creation_date("YYYY-MM-DD") %>
publish: false
source: 
tags: my/reflections 
<%"---"%>
[[<%tp.date.now("YYYY-MM-DD")%>|<%tp.date.now("dddd MMMM Do YYYY")%>]]
# <% tp.file.title %>

I use the following plugins

• core plugin - unique id note
• header file name sync
• auto note mover

[danielw]

Right now I am just using it for aliases tbh. Like I mentioned, I only started frontmatter last week and the need that drove it was the need for aliases. I am sure there is more that I will do with it as time goes on. But right now that’s the reason I am using it.

What is <% used for in your template? I’m not familiar with that syntax.

[dryice]

It’s a special sign for the Templater plugin to take notice of an instruction. For some reason when inserting a template with front matter, I encountered a problem. I found a tip that wrapping the front matter like that solved the problem.

[chrsle]

This works really great, thanks for the idea.
I saw you posted on Github that you also modified the banner spacer, to have the editable text appear higher up. This doesn’t work for me - did somthing change in 0.16 and did you by chance modify the css?
Thank you!

[dryice]

this is my current banners snippet. And I bind the snippet on/off to a hotkey using Snippets Commands plugin.

.obsidian-banner-spacer {
    height: calc(var(--banner-height) - 10rem);
}

[AlanG]

Here you all go - a way to hide / unhide YAML frontmatter from a hotkey

You can fold/unfold the YAML section using a hotkey. I use Ctrl + Y which is unassigned by default.

Steps to set up

1. Install Templater, and paste this into a new template note:

<%*
// Get the current cursor location
const cursor = app.workspace.activeLeaf.view.editor.getCursor()
// Move the cursor to the start of the document
app.workspace.activeLeaf.view.editor.setCursor({line: 0, ch: 0})
// Fold/unfold the YAML
app.commands.executeCommandById('editor:toggle-fold')
// Move the cursor back to the original location
app.workspace.activeLeaf.view.editor.setCursor(cursor)
%>

2. Open the Templater config page and set a hotkey for the new template.

3. That’s it, you’re done!

---

Automatically hiding YAML in newly created notes

You can also make this part of another template, so for example, once you insert your new note template the YAML will be automatically hidden.

If you’re doing that, you will need to put the script in its own Templater “User scripts” file per the User Scripts documentation.

1. Create a hideYaml.js file (not a Markdown .md note file). Place this in the “Script files folder location” which is configured in Templater config.

2. Paste this into your hideYaml.js file:

function main() {
  setTimeout(() => {
    const cursor = app.workspace.activeLeaf.view.editor.getCursor()
    app.workspace.activeLeaf.view.editor.setCursor({line: 0, ch: 0})
    app.commands.executeCommandById('editor:toggle-fold')
    app.workspace.activeLeaf.view.editor.setCursor(cursor)
    return ''
  }, 100)
}
module.exports = main

3. Call the script file from any other template file like this:

<%* tp.user.hideYaml() %>

That way it’s just a single one-liner which you can put in any other template. The reason for the setTimeout delay is so the new note can be created, and only after that will the YAML be hidden.

[dryice]

Hi @Alan, I pasted your script into my templater scripts folder in a file named hideYaml.js. But it causes a general templater error when using any template. Templater Error: Template parsing error, aborting. Unexpected token '<'. If I move the script out of the scripts folder, templater works again without triggering any errors.

[AlanG]

@dryice

I pasted your script into my templater scripts folder in a file named hideYaml.js.

What specifically are you pasting?

This is Markdown - eg a .md file not a .js file:

<%*
// Get the current cursor location
const cursor = app.workspace.activeLeaf.view.editor.getCursor()
// Move the cursor to the start of the document
app.workspace.activeLeaf.view.editor.setCursor({line: 0, ch: 0})
// Fold/unfold the YAML
app.commands.executeCommandById('editor:toggle-fold')
// Move the cursor back to the original location
app.workspace.activeLeaf.view.editor.setCursor(cursor)
%>

If you’re creating the Javascript file for use in tp.user, it would this format:

function main() {
    const cursor = app.workspace.activeLeaf.view.editor.getCursor()
    app.workspace.activeLeaf.view.editor.setCursor({line: 0, ch: 0})
    app.commands.executeCommandById('editor:toggle-fold')
    app.workspace.activeLeaf.view.editor.setCursor(cursor)
    return ''
}
module.exports = main

[LiZheCN]

What do you mean I am in the live mode, but yaml still there

[chadbrack]

This is great stuff, thank you @AlanG !

[bernd71]

can i also just hide the banner while i keep my YAML tags ? I like the metadata in the view mode, but hate that the banner is part of that

[caglaro]

It can be implemented like “Backlinks Panel” & “Toggle backlinks in document”.
Same thing, two view, being able to choose the experience.

Also, being able to choose showing YAML at the bottom or top of the document (on Live Preview) would be VERY welcomed.

[joshuaelarbol]

Thank you! It worked for me :D!

[Turnercore]

Agreed, I even think there should be a separate section in the UI for note metadata so it isn’t in the main note. It could in reality be at the header still, but the UI could stick it in the sidebar for a much cleaner appearance.

[GoldenSeal]

This was very helpful, thank you.

[ariehen]

Hiding YAML with CSS seemed a bit aggressive to me and was looking for an alternative.

Thanks much for the fold/unfold Templater tip @AlanG! It’s

[doubt]

I had this issue and here’s how I solved it. The problem was that I created the .js file in Obsidian as an .md file, and then renamed the extension .js using the file explorer. That caused an issue, perhaps something to do with how the spaces/new-lines were garbled. When instead I pasted the code into a blank .js file, it worked fine.

[WhiteNoise]

This will be possible in v1.4. Settings->Editor->Show File Properties