Markdown Snippets for MDX and Docusaurus README

This is a VSCode extension snippet inspired by my laziness in not memorizing markdown symbols for Docusaurus with MDX.

Features

Typing '!' in a .md/.mdx file gives you access to snippets like: !codeblock, !fmatter, !fmatter-sidebar, !admo, among others.

Bold, Code and Italics are also enabled to work with Selected Text Keybinding.

🔥New🔥 !link now works with selected text keybinding. The text you highlight will be enclosed inside the [].

Examples

Screen Recording 2022-08-21 at 1 44 30 PM copy

List of Snippets

!codeblock: codeblock with language option and title tab stops
!link: made use of this snippet, It now works with selected text keybinding.
!fmatter: snippet for the front matter with slug, title, authors, tags properties
!fmatter-sidebar: snippet for the front matter with sidebar_label, and sidebar_position properties
!admo: snippet for admonitions with type options
!export-component: snippet for react export component with two prop options
!import-components: snippet for react import component with name and path tabstops
!tab: snippet for docusaurus-mdx tab with tabItem
!element: snippet for React element
!bold: snippet that works with selected text keybinding for bold
!italic: snippet that works with selected text keybinding for italic
!code: snippet that works with selected text keybinding for code

I also added a yaml.code-snippets so !authors would work while editing in the front matter

!author: author yaml code with name, title, url, image_url tabstops
!seo: all SEO related front matter properties described here Docusaurus SEO

Requirements

MDX Support

This extension should work with .md files out of the box. For .mdx files, you would need to make file associations. To do that, simply click on the Plain Text at the bottom right of vs code and then 'Configure File Association for .mdx'. Search for Markdown then you should be all set!

To make it easier for you, here's the relevant settings.json configuration:

"editor.quickSuggestions": {
    "comments": "inline",
    "strings": "inline"
},
"[markdown]": {
    "editor.quickSuggestions": {
        "other": "on",
        "comments": "inline",
        "strings": "inline"
    }
},
"files.associations": {
    "*.mdx": "markdown"
}

Keybindings on Selected Text Support

I also wanted Bold, Code, and Italics to work with selected text keybinding. So you can add this to your keybindings.json and update the keybinding to whatever you prefer.

{
    "key": "cmd+shift+b",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "langId": "markdown",
        "name": "Markdown Bold Selected Text"
    }
},
{
    "key": "cmd+shift+c",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "langId": "markdown",
        "name": "Markdown Code Selected Text"
    }
},
{
    "key": "cmd+shift+i",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "langId": "markdown",
        "name": "Markdown Italic Selected Text"
    }
},
{
    "key": "cmd+shift+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "langId": "markdown",
        "name": "Markdown Link Selected Text"
    }
}

Installation

VS Code Market Place: Markdown Snippets for MDX and Docusaurus

Known Issues

There's no way to add keybindings directly onto the snippet extension. So you need to add the keybindings.json mentioned above to use the selected text keybindings.

Current Supported Keybindings

Bold
Italic
Code
Link

Contribution

Feel free to send a PR for any bugs or features you want to add to this.

Release Notes

All version notes are now in CHANGELOG.md.

Closing Thoughts

If you enjoy this VS Code extension, you can buy me a ☕️. I also have a blog site where I use this extension regularly and update it whenever I run into any issues or improvements I want to add while making blogs.

Enjoy!

Markdown Snippets for MDX and Docusaurus

MisterMunchkin