Snippets

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

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 insert_and_highlight.json snippet contains a couple of steps to insert code and highlight specific lines after inserting the content.

./snippets/insert_and_highlight.json

[
  {
    "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",
  "args": {
    "MAIN_FILE": "<relative path from workspace to the file to update>",
    "CONTENT_PATH": "<relative path in .demo folder 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",
    "args": {
      "setting": "workbench.statusBar.visible",
      "value": false
    }
  }, {
    "action": "setSetting",
    "args": {
      "setting": "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",
    "args": {
      "setting": "workbench.statusBar.visible",
      "value": null
    }
  }, {
    "action": "setSetting",
    "args": {
      "setting": "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"
}