New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support TOML frontmatter syntax highlighting in markdown files #41650

Closed
seaneking opened this Issue Jan 16, 2018 · 13 comments

Comments

Projects
None yet
3 participants
@seaneking

seaneking commented Jan 16, 2018

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

This comment has been minimized.

Contributor

mjbvz commented Jan 16, 2018

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

@marcobeltempo

This comment has been minimized.

Contributor

marcobeltempo commented Jan 28, 2018

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

@mjbvz

This comment has been minimized.

Contributor

mjbvz commented Jan 29, 2018

@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

This comment has been minimized.

Contributor

marcobeltempo commented Jan 30, 2018

@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

This comment has been minimized.

Contributor

mjbvz commented Feb 1, 2018

@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

This comment has been minimized.

Contributor

marcobeltempo commented Feb 6, 2018

@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

This comment has been minimized.

Contributor

mjbvz commented Feb 8, 2018

@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

This comment has been minimized.

Contributor

marcobeltempo commented Feb 8, 2018

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

@mjbvz

This comment has been minimized.

Contributor

mjbvz commented Feb 9, 2018

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

@marcobeltempo

This comment has been minimized.

Contributor

marcobeltempo commented Feb 10, 2018

@mjbvz so I've finally got it working!

image

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

This comment has been minimized.

Contributor

mjbvz commented Feb 12, 2018

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

This comment has been minimized.

Contributor

marcobeltempo commented Feb 20, 2018

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

@mjbvz

This comment has been minimized.

Contributor

mjbvz commented Feb 22, 2018

Great! Thank you for fixing this!

@mjbvz mjbvz closed this Feb 22, 2018

@vscodebot vscodebot bot locked and limited conversation to collaborators Apr 8, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.