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"
}
Related
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
I am writing a logic gate simulator and have decided to make a VSCode extension for the language it uses. So far, I have a folder named lgc that contains the extension. Inside that folder there are the following:
package.json:
{
"name": "Lgc",
"version": "0.1.0",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "AwesomeCronk",
"contributes": {
"languages": [{
"id": "lgc",
"aliases": ["lgc", "Lgc", "LGC"],
"extensions": [".lgc",".ttb"]
}],
"grammars": [{
"language": "lgc",
"scopeName": "source.lgc",
"path": "./syntaxes/lgc.tmLanguage.json"
}]
}
}
syntaxes/lgc.tmLanguage.json:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "Lgc",
"patterns": [
{
"include": "#keywords"
}
],
"repository":
{
"keywords":
{
"paterns":
[
{
"name:": "keyword.gate.lgc",
"match": "a"
}
]
}
},
"scopeName": "source.lgc"
}
This is a test that should highlight any instance of the letter a as keywords. When I copy this folder to $Home/.vscode/extensions/, and restart VSCode with a .lgc file open, it is not highlighted at all. All the text is white. The status bar shows lgc as the language, so I know VSCode is detecting the language properly. Why doesn't it highlight?
I think you have a typo in your syntaxes/lgc.tmLanguage.json file:
"paterns":
Should be:
"patterns":
I want for vscode to understand that the language in between <go> tags in a html file should be validated as golang code.
So given:
<go>
// I want to get intellisense and syntax highlighting for golang here
</go>
I currently have the following insides grammars in package.json:
{
"scopeName": "go.html.injection",
"path": "./syntaxes/go.tmLanguage.json",
"injectTo": [
"text.html"
],
"embeddedLanguages": {
"source.go": "go"
}
}
and in syntaxes/go.tmLanguage.json:
{
"scopeName": "go.html.injection",
"injectionSelector": "L:text.html",
"patterns": [
{
"include": "#go-tag"
}
],
"repository": {
"go-tag": {
"begin": "<go>",
"end": "<\/go>",
"name": "go"
}
}
}
Inspecting it using the debug gives it the name go as a textmate scope but the language is still set to html. How can I set the language of the match to golang:
Inspecting the content of script tags show the language set to javascript so this should be possible? I also realise that then the match includes the <go> tag so I understand I now need to add pattern matching and evaluation for that.
Update 20/02/20:
After referring to the vscode svelte extension I figured out how to get syntax highlighting for the tag and innerHTML using this inside syntaxes/go.tmLanguage.json (same package.json):
{
"scopeName": "go.html.injection",
"injectionSelector": "L:text.html",
"patterns": [
{
"include": "#go-tag"
}
],
"repository": {
"go-tag": {
"begin": "(<)(go)",
"beginCaptures": {
"1": {
"name": "punctuation.definition.tag.begin.html"
},
"2": {
"name": "entity.name.tag.html"
},
"3": {
"name": "punctuation.definition.tag.end.html"
}
},
"end": "(<\/)(go)(>)",
"endCaptures": {
"1": {
"name": "punctuation.definition.tag.begin.html"
},
"2": {
"name": "entity.name.tag.html"
},
"3": {
"name": "punctuation.definition.tag.end.html"
}
},
"patterns": [
{
"contentName": "source.go",
"begin": "(>)",
"beginCaptures": {
"1": {
"name": "punctuation.definition.tag.end.html"
}
},
"end": "(?=</go>)",
"patterns": [
{
"include": "source.go"
}
]
}
]
}
}
}
I can now see that vscode is correctly highlighting syntax for the tag and using the imported golang syntax tokens. However it is still displays the language as "html".
I am creating a language extension in vscode for myself. Because it will associate with different file types, I plan to make different tmlanguge files for specific rules. According to this, I could extend the scopeName to achieve that.
So I created in my ./package.json files something like this:
{
"name": "tst",
"displayName": "Test Language",
"description": "A test for language extension",
"version": "0.0.1",
"engines": {
"vscode": "^1.34.0"
},
"contributes": {
"languages": [{
"id": "tst",
"aliases": ["Test", "tst"],
"extensions": [".tst",".type1",".type2"],
"configuration": "./language-configuration.json"
}],
"grammars": [{
"language": "tst",
"scopeName": "source.tst",
"path": "./syntaxes/tst.tmLanguage.json"
},
{
"scopeName": "source.tst.type1",
"path": "./syntaxes/type1.tmLanguage.json"
},
{
"scopeName": "source.tst.type2",
"path": "./syntaxes/type2.tmLanguage.json"
}]
}
}
Then I create the base rules in ./syntaxes/tst.tmLanguage.json and both .type1 and .type2 have been applied with my grammars.
{
"name": "Test",
"patterns": [
{
"match": "test",
"name": "constant.character"
}
],
"scopeName": "source.tst"
}
Afterwards I also make ./syntaxes/type1.tmLanguage.json something like this:
{
"name": "type1",
"patterns": [
{
"match": "type1",
"name": "constant.language"
}
],
"scopeName": "source.tst.type1"
}
Nothing works for any rules in .type1.
I hope both file in the picture can recognize test and type1.
I checked the vscode pre-installed cpp language extension.
They also use scopeName for source.c and source.c.platform.
I guess it is for the similar purpose?
Did I overlook something?
Thanks for the help.
If you want to use these scopes from different tmLanguage files in the main grammar, you have to explicitly include them:
{
"name": "Test",
"patterns": [
{
"match": "test",
"name": "constant.character"
},
{
"include": "source.tst.type1"
},
{
"include": "source.tst.type2"
}
],
"scopeName": "source.tst"
}
Regarding the built-in cpp extension and platform.tmLanguage.json - as far as I can tell, it's not actively being used by the c and cpp grammars. There's this comment in cpp/build/update-grammars.js:
// `source.c.platform` which is still included by other grammars
So that sounds more like a backwards-compatibility measure in case any third-party grammars still use it.
I am writing an extension for a specific language for Visual Studio Code and I made it so far that I can set the colors for several commands.
I have my mylang.tmLanguage.json which contains (simplified) the following:
{
"\\$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "F-Script",
"patterns": [
{
"include": "#goto"
},
{
"include": "#strings"
}
],
"repository": {
"GOTO":
{
"patterns":
[{
"name": "support.function",
"match": "/(?!«)[a-zA-Z0-9_.\\-«»/(/)]{1,}(?=»)\\b"
},
{
"name": "support.function",
"match":"GOTO[(]{1}(# [a-zA-Z0-9_.-]{1,}|/)[)]{1}"
}]
},
"strings": {
"name": "string.quoted.double.f-script",
"begin": "\"|\\'",
"end": "\"|\\'",
"patterns": [
{
"name": "constant.character.escape.f-script",
"match": "$"
}
]
}
},
"scopeName": "source.f-script"
}
When I try to test the color for "strings" overrules the command GOTO.
«GOTO(# THIS.COLOR.GOTO)»
"This Should be formated like a String"
"This Should be formated like a String «GOTO(# THIS.COLOR.GOTO)»"
What i try to do is that the GOTO on the 3rd line is colored alike the first goto. My problem is that the whole line is colored like a string (including the GOTO command).
Does anyone have an idea how I can set this that the string is formated as a string and the contained commands are colored different?
You could simply include goto in the patterns for strings:
"strings": {
"name": "string.quoted.double.f-script",
"begin": "\"|\\'",
"end": "\"|\\'",
"patterns": [
{
"name": "constant.character.escape.f-script",
"match": "$"
},
{
"include": "#goto"
}
]
}