Search code examples
htmlvisual-studio-codemarkdownshortcut

How to create a shortcut to add tags around selected text in VS Code


I'm using VS Code to edit markdown files and I'd like to create some new shortcuts, such as to highlight or underline selected texts. This can be achieved by surrounding selected text by <mark>TEXT</mark> or <u>TEXT</u>. And I want to create new shortcuts to add these tags around selected text, just like adding **TEXT** by using CTRL+B.

I know how to create snippets but don't know how to write the command of these shorcuts.


Solution

  • This is very simple in VSCode because it has Emmet integrated into it.

    You just select the text, open the command pallet (CTRL SHIFT P) and select Emmet: Wrap with Abbreviation and write your tag and it will automatically wrap the test in that tag. you can also use Emmet class and tag syntax too.

    Here is a demo:

    emmet demo

    You can set the keyboard shortcuts for this action too in VSCode. In the Keyboard Shorcut Screen you can search for Emmet wrap and change them.

    emmet shortcuts