Support TOML frontmatter syntax highlighting in markdown files

[madeleineostoja]

TOML is becoming a widely supported config format, which includes markdown frontmatter for static site generators (eg: Hugo encourages TOML). It would be great if VS Code highlighted TOML frontmatter in markdown files like it already does with YAML.

I imagine this would mean bundling syntax support for TOML outright (ie: .toml files) as well, which is an added perk (extensions fill this gap currently).

---

• VSCode Version: Code 1.19.2 (490ef76, 2018-01-10T15:49:04.682Z)
• OS Version: Darwin x64 17.3.0
• Extensions:

Extension	Author (truncated)	Version
vsc-material-theme	Equ	1.2.0
html-css-class-completion	Zig	1.16.1
better-toml	bun	0.3.1
npm-intellisense	chr	1.3.0
path-intellisense	chr	1.4.2
vscode-eslint	dba	1.4.4
vscode-html-css	ecm	0.2.0
vscode-npm-script	eg2	0.3.3
sublime-keybindings	ms-	3.0.3
debugger-for-chrome	msj	4.0.0
vscode-css-peek	pra	2.1.0
markdown-all-in-one	yzh	1.0.2

---

Steps to Reproduce:

1. Add TOML frontmatter to a markdown file
2. Observe that it doesn't have syntax higlighting (in comparison to YAML frontmatter)

Reproduces without extensions: Yes

[mjbvz]

PRs welcome. The extension toml grammar may also be able to inject this into our builtin markdown grammar (example of injections)

[marcobeltempo]

Hi, I am a new contributor to the community and would like to take on this issue

[mjbvz]

@marcobeltempo Easiest fix: update our markdown grammar to have toml support. This will only work if users have a toml language extension installed. Basically just copy what we do for yaml frontmatter and update the copy to target toml instead

Alternative, you could contribute to the toml extension's grammar. This would use injections that target the markdown frontmatter. This would be the cleaner approach IMO

Let me know if you have questions about the specifics of either approach

[marcobeltempo]

@mjbvz thank you for the insight!
If I was to inject from the toml extension would I need to create a separate file named TOML.markdown.tmlLanguage?

The extension currently has an TOML.tmLanguage written in XML and a TOML.YAMAL.-tmLanguage

I've tried reading through the textmate docs and and your example, but I'm unsure of the right approach

[mjbvz]

@marcobeltempo Sorry for the delay. If you are interested in trying create a grammar injection, take a look at this repo. It demonstrates using a grammar injection to add support for a new fenced code-block language in markdown files.

For this case, the main part you'd want to change is the injectionSelector to target the to level markdown scope (text.html.markdown) instead. The grammar rule you'd inject will be similar to markdown grammar's existing frontmatter yaml rule, just using toml instead

[marcobeltempo]

@mjbvz I'm able to highlight the codeblock if I use the source of an embedded language such as source.js but haven't had any luck trying to import toml.tmlanguage

{
	"fileTypes": [],
	"injectionSelector": "L:text.html.markdown",
	"patterns": [
		{
			"include": "#toml-code-block"
		}
	],
	"repository": {
		"toml-code-block": {
			"begin": "\\A\\+{3}\\s*$",
			"end": "(^|\\G)(?=\\s*[\\+~]{3,}\\s*$)",
			"contentName": "meta.embedded.block.toml",
			"patterns": [
				{
					"include" : "source.toml"
				}
			]
		}
	},
	"scopeName": "markdown.toml.codeblock"
}

[mjbvz]

@marcobeltempo You have the toml extension installed and active, correct?

It's also possible the toml grammar itself has not been loaded when the markdown grammar is evaluated. To check this, try opening a toml first and then switching to the markdown document

[marcobeltempo]

@mjbvz That's correct.
Just tried testing by loading toml first and switching back to markdown but no luck

[mjbvz]

Can you please share the complete code? I can take a look

[marcobeltempo]

@mjbvz so I've finally got it working!

I believe I was importing the tmLanguage file incorrectly.
What would be the best practice for structuring this PR?

I've pushed a copy here for you to test out https://github.com/marcobeltempo/vscode-fenced-toml

Thank you again for your help

[mjbvz]

Nice!

You plan on submitting this to the toml-extension, correct? If so, the PR should just contain your new grammar file plus the new grammars section in the package.json

[marcobeltempo]

@mjbvz the PR was merged into Better-toml PR #11
Fixes #41650

[mjbvz]

Great! Thank you for fixing this!