Snippets

Intro

Snippets are text templates that you can insert instantly in VS Code by typing a prefix and pressing Tab.

• Enable Tab Completion
  • Open Settings (Ctrl + ,).
  • Search for “editor.tabCompletion”.
  • Set the value to true.

Markdown Snippets

markdown.json

{
  "_comment_images": "==================== Image Snippets ====================",
  "Markdown Image with Size": {
    "prefix": "imgsize",
    "body": [
      "<img src=\"${1:}\" alt=\"${2:description}\" width=\"${3:700}\">"
    ],
    "description": "Insert an HTML image tag with size attributes for use in Markdown"
  },
 
  "_comment_callouts": "==================== Callout Snippets ====================",
  "Info Callout": {
    "prefix": "infocallout",
    "body": [
      "> [!info] ${1}",
      "> <img src=\"${2:}\" alt=\"${3:img}\" width=\"${4:700}\">",
      ">",
      ">"
    ],
    "description": "Insert an [!info] callout with an image"
  },
  "Info Code Callout": {
    "prefix": "infocode",
    "body": [
      "> [!info]- ${1}"
    ],
    "description": "Insert an [!info] callout for code preview"
  },
  "Quote Callout": {
    "prefix": "quotecallout",
    "body": [
      "> [!quote] ${1}",
      "> <img src=\"${2:}\" alt=\"${3:img}\" width=\"${4:700}\">",
      ">",
      ">"
    ],
    "description": "Insert an [!quote] callout with an image"
  },
 
  "_comment_codeblocks": "==================== Code Block Snippets ====================",
  "Python Code Block": {
    "prefix": "python",
    "body": [
      "```python",
      "$0",
      "```"
    ],
    "description": "Insert a Python code block"
  },
  "JavaScript Code Block": {
    "prefix": "js",
    "body": [
      "```javascript",
      "$0",
      "```"
    ],
    "description": "Insert a JavaScript code block"
  },
  "HTML Code Block": {
    "prefix": "html",
    "body": [
      "```html",
      "$0",
      "```"
    ],
    "description": "Insert an HTML code block"
  },
  "CSS Code Block": {
    "prefix": "css",
    "body": [
      "```css",
      "$0",
      "```"
    ],
    "description": "Insert a CSS code block"
  },
  "C++ Code Block": {
    "prefix": "cpp",
    "body": [
      "```cpp",
      "$0",
      "```"
    ],
    "description": "Insert a C++ code block"
  },
  "C# Code Block": {
    "prefix": "csharp",
    "body": [
      "```c#",
      "$0",
      "```"
    ],
    "description": "Insert a C# code block"
  },
  "Blank Code Block": {
    "prefix": "blank",
    "body": [
      "```",
      "$0",
      "```"
    ],
    "description": "Insert a blank code block with no language specified"
  },
 
  "Bash Code Block": {
    "prefix": "bash",
    "body": [
      "```bash",
      "$0",
      "```"
    ],
    "description": "Insert a Bash / Shell code block"
  },
 
    "YAML Code Block": {
    "prefix": "yaml",
    "body": [
      "```bash",
      "$0",
      "```"
    ],
    "description": "Insert a YAML code block"
  },
 
   "Frontmatter with Intro": {
     "prefix": "frontmatter",
     "body": [
       "---",
       "title: ${TM_FILENAME_BASE}",
       "date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
       "aliases: []",
       "tags: []",
       "---",
       "",
       "# Intro",
       ""
     ],
     "description": "Insert a frontmatter block with date, aliases, tags, and an Intro heading"
   }
 
    "Frontmatter draft": {
    "prefix": "draftfrontmatter",
    "body": [
      "---",
      "title: ${TM_FILENAME_BASE}",
      "date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
      "aliases:",
      "draft: true",
      "tags:",
      "---",
      "",
      "# Intro",
      ""
    ],
    "description": "Insert a frontmatter block with date and an Intro heading"
  },
 
  "Colab Callout": {
    "prefix": "colabcallout",
    "body": [
      "> [!info] Open in Google Colab",
    > "> <a href=\"${1:https://colab.research.google.com/drive/}\" target=\"_blank\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>",
      ">"
    ],
    "description": "Insert an [!info] callout with a Colab link badge"
  },
 
  "Colab Link Only": {
    "prefix": "colab",
    "body": [
    > "<a href=\"${1:https://colab.research.google.com/drive/}\" target=\"_blank\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
    ],
    "description": "Insert a plain Colab link badge without a callout"
  },
  "_comment_accordion": "==================== Accordion Snippets ====================",
  "Accordion": {
    "prefix": "accordion",
    "body": [
      "<details>",
      "<summary>${1:Accordion Title}</summary>",
      "",
      "${2:Accordion content goes here}",
      "",
      "</details>"
    ],
    "description": "Insert a Markdown-compatible accordion using details/summary"
  },
  "External Link New Tab": {
  "prefix": "url",
  "body": [
    "<a href=\"${1:}\" target=\"_blank\" rel=\"noreferrer noopener\">${2:}</a>"
  ],
  "description": "Insert a link that opens in a new tab with noreferrer and noopener"
  },
 "Link with chain emoji": {
   "prefix": "chainlink",
   "body": [
     "<a href=\"${1:}\" target=\"_blank\" rel=\"noreferrer noopener\">🔗</a>"
   ],
   "description": "Insert a link/emoji that opens in a new tab with noreferrer and noopener"
 },
 "TODO Callout (Auto Duplicate)": {
   "prefix": "todo",
   "body": [
     "> [!warning]+ TODO",
     "> - [ ] ${1:first task}",
     "> - [ ] ${2:}",
     "> - [ ] ${3:}",
     "> - [ ] ${4:}",
     "> - [ ] ${5:}",
     "$0"
   ],
   "description": "TODO callout with auto-tabbing checklist items"
 }
 
}

Csharp Snippets

  "Unity Debug Log": {
      "prefix": "dbg",
      "body": [
          "Debug.Log($\"{${1}}\");"
      ],
      "description": "Insert a Unity Debug.Log with interpolation braces"
  },
 
  "Unity Debug Log Multiple Vars": {
      "prefix": "debug",
      "body": [
          "Debug.Log($\"[DEBUG] ${1:var1}:{${1}}, ${2:var2}:{${2}}\");"
      ],
      "description": "Debug.Log with [DEBUG] and up to 3 variables"
  }