Use html5 emmet inside of markdown (VSCODE)

mario mui — Sun, 03 May 2020 09:50:34 +0000

Description

If you want a great way to view your readme markdown easily, you'd want to include a dropdown menu. Readmes can get super long.

Luckily, html5 has a great way to do that via the details tag. But writing all that html5 is tedious especially since there's a thousand lists in a good readme.

So how can we get html5 emmet scripts to populate markdown?

The docs say you need to map the property in the emmet.includeLanguages property in settings.json.

That's not the only thing you have to do because markdown doesn't share the same defaults as html.
You need tab completion and quick suggestions. You also need emmet to not exclude markdown explicitly. Below is the file.

TLDR : Below is the code necessary to get it working

Set the below in your settings.json of vscode.

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

"[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": true
}
"emmet.showSuggestionsAsSnippets": true

Now type details[open=true]>summary

Great! This should fully expand the snippet.
Still, it's a little wordy.
I want a custom code snippet. Type vcdd and expand it naturally.

Set the following code to the settings.json section of vscode
"emmet.extensionsPath": "~/SOME_DIRECTORY/"
Create a snippets.json in that directory defined in the previous section
Set the following code inside snippets.json

{
  "html": {
    "snippets": {
      "vcdd":"details[open=true]>summary"
    }
  }
}

Great! Now every time you type in vcdd, the custom emmet snippet will trigger the snippet which will then trigger the emmet specific html snippets.

Caveats
emmet.extensionsPath only points to the directory that snippets.json resides.
No runners watch snippets.json. In order to see a change, you need to
settings.json to do a manual reload. Just delete a random character in your settings.json. Save it. Then add the same character back in the same place inside settingsjson. Save it. That should reload snippets.json.

References

https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets
https://github.com/Microsoft/vscode/issues/32702

Forem: mario mui

Use html5 emmet inside of markdown (VSCODE)

Description

TLDR : Below is the code necessary to get it working

References