Create VSCode Snippets for Markdown Blog Workflows

Utilize VSCode snippets to simplify the creation of new posts

LIU YONGLIANG

--

Motivation

I write my blog posts in Markdown and my personal site is powered by Gatbsy.js. Within a Markdown file, there are frontmatter and content.

  • Frontmatter is a YAML block that contains the post’s metadata such as title, date and description. It will be parsed and used by the site generator to generate the post’s page.
  • The content is simply Markdown-styled text.

For example, this post will look something like this in the source code:

---
title: Create VSCode Snippets for Markdown Blog Workflows
date: 2023-01-03T15:09:34Z
description: Utilize VSCode snippets to simplify the creation of new posts
tags: ["markdown", "vscode"]
---

## Motivation
I write my blog posts in Markdown and...
And the rest of the body text...

For the past year, what I had to do when creating a new post was to copy the frontmatter from an existing post and then manually update it. This was not particularly pleasant. I am ashamed to admit that I just let laziness take over and did not do anything about it.

Let’s fix this with VSCode snippets.

Create a snippet

A VSCode snippet is a pre-defined text that can be inserted on a trigger. You can specify:

  • the triggering word or phrase
  • what should be inserted
  • can be a simple text
  • can have placeholders
  • can use variables

The details can be found in the VSCode documentation.

Let’s go through my use case as a concrete example.

Steps

What I want to achieve:

  • insert a frontmatter block with the key-value pairs required
  • auto-populate the date field with the current date-time in ISO 8601 format (this is the format that my parser expects)
  • insert some boilerplate headings for the content

1. Create a snippet file

  1. Open VSCode
  • Open the repository of your choice, if any
  • My blog is contained in a folder called blogging, so I will open…

--

--

LIU YONGLIANG

Computer Science Student @ National University of Singapore. Connect with me @ https://www.linkedin.com/in/-yong-/