Markdown features

Overview

The Front Matter extension tries to make it easy to manage your Markdown pages/content. Within a Markdown page, we allow you to fold the file's Front Matter to be less distracting when writing. Also, do we highlight the Front Matter content to create a visual difference between content and metadata.

Insert images

Inserting images was never easier with the insert image into article command, which can also be triggered with the camera icon in the editor title bar (Markdown files only).

Insert images

Important: If you want, you can add your own media snippet to allow you to use your shortcodes/markdown/... In order to specify the snippet, use the frontMatter.dashboard.mediaSnippet setting.

Insert your own media snippet

The frontMatter.dashboard.mediaSnippet setting is used similarly like the default VS Code snippets. You need to define an array of strings for multiline snippets.

The example used in the GIF above looks as follows:

"frontMatter.dashboard.mediaSnippet": [
  "{{< imgShortCode \"{mediaUrl}\" \"{caption}\" >}}"
]

Placeholders

For your snippet, you can use the following placeholders:

  • {mediaUrl}: Use this to insert the relative path to the media file.
  • {caption}: Use this placeholder where you want to insert the caption.
  • {alt}: Use this placeholder where you want to insert the alt attribute value.

Info: All three placeholders are optional, so you can leave out the placeholders you do not want to use from your snippet.

Front Matter folding

If you want to focus on the content of your page, you have the ability to fold the Front Matter section of your page.

Folding range

Front Matter highlighting

The extension will automatically highlight the Front Matter of you document to create a visual difference between metadata and content.

Highlighting

Info: If you do not want this feature, you can disable it in the extension settings -> Highlight Front Matter or by setting the frontMatter.content.fmHighlight setting to false.

Feedback

Do you want to provide feedback about this page/content?

Provide feedback
Last updated on

Did you spot an issue in our documentation, or want to contribute? Edit this page on Github!

Special thanks to our sponsors

Vercel