Can I use front matter in Stackedit markdown files?

#1

I’d like to use front matter in Stackedit markdown files so that I can set custom variables to use in Stackedit’s handlebar template. The use case is that I want to add specific classes to different files upon publication.

Here’s my test stackedit markdown file:

---
body-class: post
---
test demo content

Here’s my stackedit template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{files.0.name}}</title>
</head>

<body class="stackedit {{files.0.body-class}} test">
  {{{files.0.content.html}}}
</body>
</html>

Here’s the resulting html output that stackedit publishes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>front-matter-test</title>
</head>

<body class="stackedit  test">
  <hr>
<h2 id="body-class-post">body-class: post</h2>
<p>test demo contents</p>

</body>
</html>

Is there anything I do to make stackedit recognize the front matter?

#2

Do you just want to add “custom variables” to your files in general,
or do you specifically want to write front matter in the file itself?

If you don’t need the properties to be in the prose, you can open the StackEdit Menu in the top right, and click File Properties.

If you feel any custom variables you add must be in the markdown itself, frontmatter style, I’m afraid you’re in for a world of pain! (jk… mostly)
At that point you’ll have to fiddle with writing Handlebars helpers…

If it is the latter, and you want any help with that, just let me know.

#3

@J_Redhead thanks!

Yep, I just want to add custom variables to my files. (Front matter would be a great way to do it because then it’s easily visible and I don’t have to click around to another location in the UI to find it, but it sounds like stackedit doesn’t support front matter.)

I did try using the File Properties and it didn’t work. But maybe I just have the syntax wrong. Can you elaborate on how exactly this would be done.

Here’s my attempt that didn’t work:

within File Properties > YAML Properties:

body-class: post
extensions:
  preset: ''

And within the the Stackedit template:

<body class="stackedit {{files.0.body-class}} test">
  {{{files.0.content.html}}}
</body>

I also tried this in the Stackedit template:

<body class="stackedit {{page.body-class}} test">
  {{{files.0.content.html}}}
</body>

But the body-class didn’t appear in stackedit’s html output.