Markdown Snippet for Visual Studio Code

markdown.json

{
	// insert markdown links
	"Insert Link" : {
		"prefix": "link",
		"body": [
			"[text][text]{:target=\"_blank\"}"
		]
	},
	"Insert Reference" : {
		"prefix": "ref",
		"body": "[text]:"
	},
	"Insert Image Link" : {
		"prefix": "img",
		"body": "![LINK_TEXT](/assets/images/.png \"ALT_TEXT\")"
	},

	// escape double curly braces in liquid markdown
	"Raw Start" : {
		"prefix": "raws",
		"body": "{% raw %}"
	},
	"Raw End" : {
		"prefix": "rawe",
		"body": "{% endraw %}"
	},

	// insert various minimial-mistakes classes
	"Notice" : {
		"prefix": "!",
		"body": "{: .notice}"
	},
	"Warning" : {
		"prefix": "!w",
		"body": "{: .notice--warning}"
	},
	"Info" : {
		"prefix": "!i",
		"body": "{: .notice--info}"
	},
	"Danger" : {
		"prefix": "!d",
		"body": "{: .notice--danger}"
	},
	"Success" : {
		"prefix": "!s",
		"body": "{: .notice--success}"
	},
	"Center" : {
		"prefix": "=",
		"body": "{: .text-center}"
	},
	"Left" : {
		"prefix": "<",
		"body": "{: .text-left}"
	},
	"Right" : {
		"prefix": ">",
		"body": "{: .text-right}"
	}

}

I blog using Jekyll, a Ruby-based site generator and the minimal-mistakes theme. I often forget how to insert a notice class or how to make a link open in a new browser.

Today, I added the above file to my user snippets to my Visual Studio Code.

1. Just open the command palette (on Windows, it's CTL+SHIFT+P) and type "user snippets".
2. Scroll down to markdown file type and select it.
3. Paste the contents of the above file into the markdown.json that opens.
4. Save and exit it.

To use it, type the prefix listed in the file and then CTL+SPACE.
When you see your snippet in the list, just hit enter.

Pretty simple.

You can change the prefix to anything that is meaningful to you.

Leave a comment if you like this gist.

Thanks for reading!