Custom Extended Syntax Highlighting For Markdown. This extends upon the existing markdown highlighting in VSCode by using custom `textMateRules`, to colourize more tokens.

settings.jsonc

{
	"editor.tokenColorCustomizations": {
		"textMateRules": [
			// Underlined link (e.g. `some-link` in `[Name](some-link)`)
			{ "scope": "markup.underline.link.markdown", "settings": { "foreground": "#aaaaaa" } },
			// List Character (e.g. `-`, `*`, `+`)
			{ "scope": "punctuation.definition.list.begin.markdown", "settings": { "foreground": "#FFED9D" } },
			// Heading Hashes (e.g. `##` in `## HEADING`)
			{ "scope": "punctuation.definition.heading.markdown", "settings": {} },
			// Heading Text (e.g. `HEADING` in `## HEADING`)
			{ "scope": "entity.name.section.markdown", "settings": { "fontStyle": "bold underline" } },
			// Title of link (e.g. `Title` in `[Title](link)`)
			{ "scope": "string.other.link.title.markdown", "settings": { "foreground": "#dc7853" } },
			{ "scope": "punctuation.definition.metadata.markdown", "settings": { "foreground": "#e761dc" } },

			// IMAGES
			// Image link start (e.g. `(` in `![some image](image.png)`)
			{ "scope": "punctuation.definition.link.title.begin.markdown", "settings": { "foreground": "#569CD6" } },
			// Image link start (e.g. `)` in `![some image](image.png)`)
			{ "scope": "punctuation.definition.link.title.end.markdown", "settings": { "foreground": "#569CD6" } },
			// Image link (e.g. `image.png` in `![some image](image.png)`)
			{ "scope": "markup.underline.link.image.markdown", "settings": { "foreground": "#cd56d6" } },
			// Image description start (e.g. `[` in `![some image](image.png)`)
			{ "scope": "punctuation.definition.link.description.begin.markdown", "settings": { "foreground": "#FFED9D" } },
			// Image description end (e.g. `]` in `![some image](image.png)`)
			{ "scope": "punctuation.definition.link.description.end.markdown", "settings": { "foreground": "#FFED9D" } },
			// Image description (e.g. `some image` in `![some image](image.png)`)
			{ "scope": "string.other.link.description.markdown", "settings": { "foreground": "#00D5FF" } },
			
			// TABLES
			// Table Pipe (e.g. all `|` characters in `| Name | Description |`)
			{ "scope": "punctuation.definition.table.markdown", "settings": { "foreground": "#569CD6" } },
			// Any text in tables
			{ "scope": "markup.table.markdown", "settings": { "foreground": "#9CDCFE" } },
			// :-- in tables
			{ "scope": "punctuation.separator.table.markdown", "settings": { "foreground": "#FFFFFFCC" } },
			{ "scope": "meta.separator.markdown", "settings": { "foreground": "#569CD6" } }
		]
	}
}

Extended Syntax Highlighting for Markdown Files in VSCode

This is a JSON file that adds extra syntax highlighting support for Markdown (.md) files in Visual Studio Code.

No extensions are required.

This makes use of VSCode's build-in TextMate Tokenisation System to colour the symbols.

Most of these tokens are coloured #ffffff white by default. By colouring them a different colour, it makes the code look cleaner, and aids legibility.

---

Installation

1. Go to Code > Settings (default shortcut Cmd ⌘ + ,).
2. Go to the settings.json file (click the icon at the top).
3. Copy and paste the below code:

{
    "editor.tokenColorCustomizations": {
        "textMateRules": [],
    },
},

4. Copy and paste the syntax highlighting file, and replace the [] with its contents.
5. Save your changes.

You will see the changes instantly after saving. You don't need to restart VSCode.

---

Configuration

Colours

All colours can be customised by replacing the foreground key with another valid colour.
Colours are expressed in hex values.

Examples:

• #9CDCFE
• #FFED9D
• #dc7853

You can also use alpha (opacity / transparency).

For example, #ffffff is equivalent to #fff, #ffff and #ffffffff.
Colours are not case-sensitive.

Caution

Avoid using red if possible.
This colour is usually reserved to indicate erroneous code.

Font Style

You can also change the fontStyle of the text. There are four parameters to change the style by:

• Bold
• Italic
• Underline
• Strikethrough

Tip

It is generally advised not to use strikethrough for most text.
Strikethrough usually indicates depreceated code.

---

Themes

Colours and font styles can be configured per theme.
To configure for a specific theme, surround the theme name in square brackets ([]).

For example,

"editor.tokenColorCustomizations": {
    "textMateRules": [
        { "scope": "meta.separator.markdown", "settings": { "foreground": "#569CD6" } },
    ]
}

specifies colours for all themes, whereas

"editor.tokenColorCustomizations": {
    "[Default Dark Modern]": {
        "textMateRules": [
            { "scope": "meta.separator.markdown", "settings": { "foreground": "#569CD6" } },
        ]
    }
}

only specifies for VSCode's Default Dark Modern theme.

---

Inspecting TextMate Scopes

VSCode has a built-in TextMate Scope Inspector that allows you to inspect the textmate scopes of any code.