Example of injecting a new grammar into VSCode's builtin markdown syntax highlighting for fenced code blocks
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Initial commit Apr 12, 2017
syntaxes Only match language id after fenced code block start Sep 12, 2018
.editorconfig Initial commit Apr 12, 2017
.gitignore Initial commit Apr 12, 2017
.vscodeignore Initial commit Apr 12, 2017
CHANGELOG.md Initial commit Apr 12, 2017
LICENSE Initial commit Apr 12, 2017
README.md Document how to modify this repo to get started Feb 13, 2018
jsconfig.json Initial commit Apr 12, 2017
package.json Mark embedded languages in code block Sep 25, 2017

README.md

VSCode Markdown Fenced Code Block Grammar Injection Example

Demonstrates how an extension can inject support for a new grammar in VSCode's builtin markdown grammar for fenced code blocks. This extension injects an alias for JavaScript called superjs so support editor highlighting of blocks that look like:

```superjs
someJsCode
```

Structure

  • package.json - VS Code extension manifest file. The contributes.grammars section registers the injected grammar.
  • syntaxes/codeblock.json - The injected grammar itself

How to modify this repo to support a new language in fenced code blocks

  1. In syntaxes/codeblock.json, change the begin rule from superjs to the identifier of your target language. This identifier is what people will write in markdown.
  2. In syntaxes/codeblock.json, change the inner include rule from "source.js" to the scope of your target language. This scope can be found by looking at the target language's grammar.
  3. In syntaxes/codeblock.json, change the contentName from using superjs to using a identifier for your language. This identifier may only contain letters but does not have to match the identifier from step 1.
  4. In syntaxes/codeblock.json, change the scopeName from using superjs to using a identifier for your language. This identifier may only contain letters but does not have to match the identifier from step 1.
  5. In package.json, change the scopeName to match the scopeName from step 4.
  6. In package.json, change embeddedLanguages to map between the contentName from step 3 and the VS Code identifier for your language.