Create VSCode Snippets for Markdown Blog Workflows

Utilize VSCode snippets to simplify the creation of new posts

LIU YONGLIANG
4 min readJan 3, 2023

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

--

--

LIU YONGLIANG

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