CODEWITHSUNDEEP
visual-studio-code
Ben
Ben

Reputation: 3912

VSCode - wrap selected text in "<mark></mark>"

I'm using the markdown previewer in VSCode and would like the ability to highlight some text in an ".md" file and wrap it in a "<mark></mark>" tag so that it displays highlighted when you view the markdown file in its rendered format.

Is there a quick and easy way to do this?

Upvotes: 3

Views: 1606

Answers (2)

Jason
Jason

Reputation: 15335

A snippet should do the trick.

"wrap_mark": {
    "prefix": "wrap_mark",
    "body": [
        "<mark>$TM_SELECTED_TEXT</mark>"
    ],
    "description": "Wrap selected with <mark>"
},

Add that to your snippets/markdown.json file.

Then, add the following to your keybindings.json file

{ "key": "cmd+e 1", 
    "command": "editor.action.insertSnippet", 
    "args": { "name": "wrap_mark" } 
},

Now, in your markdown file you can highlight the text and hit cmd + e then 1 and the highlighted text gets wrapped in <mark>

enter image description here

I have a series of snippets mapped to cmd + e + "" - you can use any key combo you want (I'm on a Mac so I use the cmd key)

Upvotes: 8

Matt Bierner
Matt Bierner

Reputation: 65273

In your user settings, add:

"emmet.excludeLanguages": [ ],
"emmet.includeLanguages": {"markdown": "html"},

This enables emmet in markdown files.

Then in the markdown file, use the Emmet: Wrap with abbreviation command:

enter image description here

You can also create a snippet that does this specifically for <mark/>. Take a look at the TM_SELECTED_TEXT snippet variable

Upvotes: 3

Related Questions