Welcome!

Snippets

In this section, we explore the convenience of creating and using custom code snippets to streamline your workflow. These snippets can be utilized to speed up your content creation process and boost productivity while working with Markdown files

Create Snippets

To create snippets, you need to navigate to the .vscode directory in your project and create a new file named your-filename.code-snippets.

Template

{
    "template": {
        "scope": "markdown",
        "prefix": "template",
        "body": [
            "## ${1:Title}",
            "",
            "${2:Description}",
            "",
            "```${3:language}",
            "${4:code here}",
            "```",
            "",
            "$0"
        ],
        "description": "General template"
    }
}

  • template: The name of the snippet, used to identify it in the system.

  • scope: markdown: This specifies the scope in which the snippet can be triggered. In this case, it is set to markdown, meaning the snippet can be used in Markdown files.

  • prefix: template: The prefix is the keyword you type to trigger the snippet expansion when using the Intellisense feature. In this case, typing template and then pressing Tab will expand the snippet.

  • body: This is the main content of the snippet, which is an array of strings representing the lines to be inserted when the snippet is expanded.

  • description: General template: This provides a brief description of the snippet's purpose, which is displayed when you search for snippets in your editor's autocomplete.

Example

{
    "video": {
        "scope": "markdown",
        "prefix": "video",
        "body": [
            "<video src='$1' loop muted>"
        ],
        "description": "Insert video element"
    }
}

Use Snippets

In VS Code, you can access and insert your custom code snippets while working on Markdown files using the Ctrl+Space (Windows) or Cmd+Space (macOS) keyboard shortcut. This keyboard combination triggers IntelliSense, an intelligent code completion feature, which displays a dropdown menu with suggested completions, including your custom snippets