Timeline | Contributing to Visual Studio Code

Contributing to Visual Studio Code


Requested to work on issue# 42245
[BUG, CSS, Emmet] suggestion color if said "#" like "id"
Recieved response regarding Requested to work on issue# 42245
Certain vscode members are assigned specific issues

VS Code Timeline Capture 1

Requested to work on issue#41650
Support TOML frontmatter syntax highlighting in markdown files

Steps to Reproduce:

Add TOML Front Matter to a Markdown file
Observe that it doesn’t have syntax highlighting (in comparison to YAML Front Matter)


VS Code Timeline Capture 2

Essentially we need to inject YAML code block syntax highlighting into Markdown files.


TOML (Tom’s Obvious, Minimal Language) – easy to read configuration file format

textmate – language grammar is used only to parse the document and assign names to subsets

better-toml– toml extension for vs code editor

Front Matter-allows you to keep metadata attached to an instance of a content type

Many attempts later...

After a great deal of confusion trying to connect the dots between Hugo, TOML, Font Maker, language injection I decided to reach out for help.

VS Code Timeline Capture 3

Different Approach

As I was waiting for a response from Matt and the Slack channel, I tried to isolate the problem as best as I could.
Instead of having to rebuild the full dev environment + extension, why not create a light weight test extension with just the features I needed to add.
I began reading up on how to create and manage a vs code extension.


After many failed attempts I was able to isolate TOML code block from a Markdown file.
The only issue now is trying to connect the code block to existing syntax highlighters.

Who is this Tom guy anyways?

Still puzzled as to how I can reference TOML language support from another extension.
So far I’ve tried included the toml-language-support extension as a dependency to deference the scope name “source.toml” but still no luck.

"Yo" got to be kidding me

After reading over VS code’s “Extension Authoring” documentation they had referenced a tool named “Yo Code”.
A tool that generates basic Visual Studio extension templates for themes, language support, snippets, TypeScript and JavaScipt extensions.
During this setup process, I was able to directly reference the toml.tmLanguage file from the “TOML Language Support” extension.

I see the highlight!

After successfully being able to reference the “source.toml” scope name. I was finally able to detect TOML syntax within a Markdown file.

TOML Front Matter Codeblock in Markdown file

Decided to stop with the puns...
Created a demo repository

Uploaded a repository which includes a demo extension illustrating the new TOML Front Matter feature in a Markdown file.

Pull request merged!

Bungcip the creator of better-toml merged my PR into the latest release.
better-toml changelog

Related Posts