Snippets

Here are some snippets that you can use to automate some tasks in your demo.

Snippets are available in both JSON and YAML formats. Use whichever format you prefer!

Prerequisites

Create a snippets folder in the .demo directory of your project. This is where you will store your snippets.

Note

You can change name of the snippets folder, but you will need to update the contentPath in the snippet action.

Insert and highlight code

The snippet is available in both JSON and YAML formats:

• insert_and_highlight.json
• insert_and_highlight.yaml

This snippet contains a couple of steps to insert code and highlight specific lines after inserting the content.

JSON

./snippets/insert_and_highlight.json

[
  {
    "action": "unselect"
  },
  {
    "action": "insert",
    "path": "{MAIN_FILE}",
    "contentPath": "{CONTENT_PATH}",
    "position": "{CONTENT_POSITION}"
  },
  {
    "action": "waitForTimeout",
    "timeout": 500
  },
  {
    "action": "highlight",
    "path": "{MAIN_FILE}",
    "position": "{HIGHLIGHT_POSITION}"
  }
]

YAML

./snippets/insert_and_highlight.yaml

- action: unselect
path: "{MAIN_FILE}"
- action: insert
path: "{MAIN_FILE}"
contentPath: "{CONTENT_PATH}"
position: "{CONTENT_POSITION}"
- action: waitForTimeout
timeout: 500
- action: highlight
path: "{MAIN_FILE}"
position: "{HIGHLIGHT_POSITION}"

You can configure the snippet action as follows:

./demo.json

{
  "action": "snippet",
  "contentPath": "./snippets/insert_and_highlight.json",  // or .yaml
  "args": {
    "MAIN_FILE": "<relative path from workspace to the file to update>",
    "CONTENT_PATH": "<relative path to the file with the contents to insert>",
    "CONTENT_POSITION": "<line number>",
    "HIGHLIGHT_POSITION": "<line number>:<line number>"
  }
}

Show slide

The show_slide.json snippet contains a step to show a slide within Visual Studio Code.

./snippets/show_slide.json

[
  {
    "action": "executeVSCodeCommand",
    "command": "workbench.action.closeSidebar"
  }, {
    "action": "executeVSCodeCommand",
    "command": "workbench.action.closePanel"
  }, {
    "action": "setSetting",
    "setting": {
      "key": "workbench.statusBar.visible",
      "value": false
    }
  }, {
    "action": "setSetting",
    "setting": {
      "key": "workbench.activityBar.location",
      "value": "hidden"
    }
  }, {
    "action": "executeVSCodeCommand",
    "command": "simpleBrowser.show",
    "args": "{SLIDES_URL}"
  }
]

You can configure the snippet action as follows:

./demo.json

{
  "action": "snippet",
  "contentPath": "./snippets/show_slide.json",
  "args": {
    "SLIDES_URL": "<URL to the slide>"
  }
}

Note

I am making use of Slidev to create slides and as it generates a site, I can use the URL to show the slide in Visual Studio Code.

Reset view after slide

The [reset_view_after_slide.json snippet contains the steps to reset the view after showing a slide.

./snippets/reset_view_after_slide.json

[
  {
    "action": "setSetting",
    "setting": {
      "key": "workbench.statusBar.visible",
      "value": null
    }
  }, {
    "action": "setSetting",
    "setting": {
      "key": "workbench.activityBar.location",
      "value": null
    }
  }, {
    "action": "executeVSCodeCommand",
    "command": "workbench.action.toggleSidebarVisibility"
  }
]

You can configure the snippet action as follows:

./demo.json

{
  "action": "snippet",
  "contentPath": "./snippets/reset_view_after_slide.json"
}