How to inject a TextMate grammar to a Markdown heading in VS Code? - visual-studio-code

I want to select [ ] for syntax highlighting within a markdown file in VS Code.
I can target [ ] using the following regex: (?<=\s)\]|\[(?=\s).
However [ ] doesn't get matched when it is part of a heading.
As a minimal example, in the package.json I have the following:
"contributes": {
"grammars": [
{
"scopeName": "markdown.todo",
"path": "./syntaxes/todo.markdown.json",
"injectTo": ["text.html.markdown"]
}
]
}
Then, in the todo.markdown.json I have:
{
"scopeName": "markdown.todo",
"injectionSelector": "L:text.html.markdown",
"patterns": [
{ "include": "#item-todo" }
],
"repository": {
"item-todo": {
"name": "item.todo",
"match": "(?<=\\s)\\]|\\[(?=\\s)"
}
}
}
Finally, in the VS Code settings.json I apply a color using:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "item.todo",
"settings": {
"foreground": "#FF0000"
}
}
]
}
I can see below that [ ] gets selected, but not when it is within a heading.
When I inspect the tokens and scopes I see several textmate scopes.
I am not sure if this is related, but it seems that VS Code is highlighting the markdown headings based on the markup.heading scope. However, markup.heading is not present in the textmate scopes array.
I tried changing to "injectionSelector": "L:heading.1.markdown" and/ or "injectTo": ["heading.1.markdown"], but no matter what selectors I specify I cannot seem to be able to match [ ] within a heading.

Related

converting vim syntax highlighting into vscode syntax highlighting

I've looked around - and could not find a way to automatically do this. so:
I have some syntax highlighting I built in vim I want to transfer over to vscode. and I'm getting stuck on at least 2 parts.
so far here's where I'm at: I've build a vscode language extension - set up some basic syntax rules, and have that copied over to the vscode config folder.
the parts I'm having trouble with - I could use some clarity in what some fields mean - naming conventions.
and nested parsing of syntax, things only appearing in other elements.
below is the bit I added on top of the vim-markdown syntax.
syntax region spokenWord start=/\v"/ skip=/\v\\./ end=/\v"/ contained
syntax region thoughtWord start=/\v'/ skip=/\v\\./ end=/\v'/ contained
syntax region codeWord start=/\v`/ skip=/\v\\./ end=/\v`/ contained contains=objkw,spokenWord,thoughtWord,action,description,executekw
syntax region action start=/\v*/ skip=/\v\\./ end=/\v*/ contained
syntax region description start=/\~/ skip=/\v\\./ end=/\~/ contained
syntax match executekw "[e][x][e]\s" contained
syntax match objkw "[.][\w]+" contained
syntax region BLOCK start=/{/ skip=/\s+/ end=/}/ contains=spokenWord,thoughtWord,codeWord,action,description
highlight link spokenWord String
hi thoughtWord ctermfg=red
hi codeWord ctermfg=gray
highlight link action function
highlight link description Statement
hi BLOCK guibg=#FF00FF ctermfg=magenta cterm=bold guifg=#00FF00
hi exepm ctermfg=green
hi objP ctermfg=red
hi fntk ctermfg=blue
hi fnnm ctermfg=130
hi executekw ctermfg=130
hi objkw ctermfg=130
which results in this look:
what I have so far for the vs code syntax is as follows:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "MDX",
"patterns": [
{
"include": "#keywords"
},
{
"include": "#strings"
},
{
"include":"#thought"
},
{
"include":"#action"
},
{
"include":"#description"
},
{
"include":"#code"
},
{
"include":"#block"
},
{
"include":"#object"
}
],
"repository": {
"keywords": {
"patterns": [{
"name": "keyword.control.markdownextened",
"match": "\\b(EXE|IF|WHILE|FOR|RETURN)\\b"
}]
},
"strings": {
"name": "string.quoted.double.markdownextened",
"begin": "\"",
"end": "\"",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"thought":{
"name": "thought.quoted.single.markdownextened",
"begin": "'",
"end": "'",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"action":{
"name": "action.asterisk.markdownextened",
"begin": "*",
"end": "*",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"description":{
"name": "action.tilde.markdownextened",
"begin": "~",
"end": "~",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"code":{
"name": "action.grave.markdownextened",
"begin": "`",
"end": "`",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"block":{
"name": "action.braces.markdownextened",
"begin": "{",
"end": "}",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"object":{
"name": "action.object.markdownextened",
"patterns": [
{
"name": "action.object.markdownextened",
"match": "/[.][\\w]/"
}
]
}
},
"scopeName": "source.markdown"
}
I could not find a guide anywhere on converting vim syntax highlighting into vscode syntax highlighting. I'll be reading though the documentation until I figure this out - but would love some help!
Are you wanting to do a one off conversion
or a tool to continuously convert a large amount of highlighters?
I doubt there will be many, if at all any, large public vim to vscode converters tools
I am going to assume your vscode example above is working
and you have read up on pages like
Your First Extension Visual Studio Code Extension
Syntax Highlight Guide Visual Studio Code Extension
Writing a TextMate Grammar Some Lessons Learned
oniguruma/RE at master kkos/oniguruma
I would highly suggest looking at other people's highlighters Where are extensions installed?
and download a TextMate syntax highlighter
TextMate Languages or (my own) Text Mate Language Syntax Highlighter
Colours are defined by your current theme
Your theme defines colours based on the scopename that you give to each token in your highlighter

Change the color of the property-value in .json file in VSCode

I'm trying to customize the color of the property-value keywords (reserved values) for .css and .scss files in the .json file in VSCode. I tried:
"editor.tokenColorCustomizations":{
"textMateRules": [
{
"name": "CSS Class and Support - Class",
"scope": [
"source.css entity.other.attribute-name.class.css",
"source.sass entity.other.attribute-name.class.css",
"source.scss entity.other.attribute-name.class.css",
"source.less entity.other.attribute-name.class.css",
"source.stylus entity.other.attribute-name.class.css",
"source.postcss entity.other.attribute-name.class.css"
],
"settings": {
"foreground": "#f56464"
}
}
]
}
But this didn't change the color of the property-value keywords.
I appreciate any help. Thanks in advance.
You are using the attribute-name.class scopes which appear to be the selectors like .myClass. It is working for those.
If by "property-value" keywords you mean something like background-color or border then this works:
"editor.tokenColorCustomizations":{
"textMateRules": [
{
"name": "CSS Property Names",
"scope": [
"support.type.property-name.css",
// etc.
],
"settings": {
"foreground": "#f56464"
}
}
]
}

Embedding C# Language in an Visual Studio Code Extension

I am trying to embed c# syntax highlighting in a VSC Extension.
My tmLanguange.json is as follows
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "CS Asm",
"patterns": [
{
"include":"#csasm"
}
],
"repository": {
"csasm" :{
"patterns": [{
"name" : "meta.embedded.block.bmasm",
"begin": "#{",
"end": "}",
"patterns" : [{
"include" : "source.csharp"
}]
}]
}
},
"scopeName": "source.csasm"
}
However this doesn't produce any highlighting within VSC. If I change source.csharp to something else it does work.
Normal .cs files are highlighted properly, so I assume there is a 'csharp' extension loaded to provide the syntax rules.
Is there something special about C#?
Because Microsoft defines source.cs not source.csharp,
https://github.com/microsoft/vscode/blob/main/extensions/csharp/package.json#L33

Visual Studio Code Syntax HighLighting tmLanguage.json

I'm working on my first compiler as a bit of training project. I'd also like to create a small syntax highlighting project.
Looking at the default tmLanguage file, it's unclear to me what triggers a color. For example, I see the string type does in fact trigger string coloring when I debug, but what causes this? The 'strings' name of the repo? How does that connect to the coloring theme? Where can I see a list of names for default themes, etc.?
Looking at the examples, they seem to jump over a lot of info, so I'm not sure where to start on some things.
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "N",
"patterns": [
{
"include": "#keywords"
},
{
"include": "#strings"
}
],
"repository": {
"keywords":
{
"patterns":
[{
"name": "keyword.control.n",
"match": "\\b(if|while|for|return)\\b"
}]
},
"strings":
{
"name": "string.quoted.double.n",
"begin": "\"",
"end": "\"",
"patterns": [
{
"name": "constant.character.escape.n",
"match": "\\\\."
}
]
}
},
"scopeName": "source.N"
}

How can I author a Snippet Collection to multiple languages in VSCode Marketplace?

My goal is to create a collection of Snippets that will be available in the VSCode Marketplace. These snippets will be for 3 languages (html, css, and JS). This will be helpful for anyone who works on the specific framework, but especially my team.
I know that I can scope snippets (How can I add language-agnostic snippets in vscode?) to multiple languages. I also know that according to the docs I'm supposed to have a contributes object that has a snippets array in it. In my package.json for my vsc-extension the default is like the below:
"contributes": {
"snippets": [
{
"language": "markdown",
"path": "./snippets/markdown.json"
}
]
}
Is it correct for me to then update my package.json to something like:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
]
}
and then have my snippets declare their own scope ("scope": "html")?
The way I went about this was to create a file for each type of snippet: php-snippets.json, js-snippets.json, etc. and then add those files to the snippets array.
"contributes": {
"snippets": [
{
"language": "php",
"path": "./snippets/php-snippets.json"
},
{
"language": "javascript",
"path": "./snippets/js-snippets.json"
}
]
}
One piece of information I left out from my question is that I used the Yo generator to create my snippet project. This was the recommended action in the documentation.
This worked. I added several languages to the snippets array in contributes as seen below.
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
,
{
"language": "scss",
"path": "./snippets/snippets.json"
}
]
}
Then inside snippets/snippets.json there is one large object that contains all of my snippets. You can see an example of that below. The key lines for each are "scope": "html and "scope": "scss".
"Each Helper": {
"scope": "html",
"prefix": "each",
"body": [
"{{#each $1}}",
" $2",
"{{/each}}"
],
"description": "Creates each helper -- handlebars"
},
"Break Point Small": {
"scope": "scss",
"prefix": "bps",
"body": [
"",
"#include breakpoint(\"small\") {// 551px and up",
" $1",
"}"
],
"description": "Tablet Break Point --Stencil"
},
I suppose I should have just tried it after not being able to find the answer here or in documentation.