Is there a way to extend Visual Studio Code syntax highlighting for specific items using the user settings (or similar methods not involving writing an extension)?
I am using a color theme but would like to change the syntax colouring for a specific namespace of HTML tags, e.g.
<div></div> uses standard colouring from theme
<ext:div></ext:div> uses a different color
No, there is nothing in VSCode proper (no extensions) that will highlight an arbitrary regex. (Well, there is the Search feature, but the highlighting from that is temporary.)
Short of writing an extension or using an existing one that does this, the most capable method of highlight customization is the textMateRules mechanism of editor.tokenCustomizations in settings.json.
Now, the built-in TextMate grammar simply classifies "ext:div" as unrecognized, so the best possible with this approach is to change the highlighting for all unrecognized tags. That would look like this:
// https://code.visualstudio.com/docs/getstarted/themes
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"meta.tag.other entity.name.tag",
],
"settings": {
"foreground": "#080",
"fontStyle": "bold",
},
},
],
},
Screenshot:
See also this answer that goes through the process of adding textMateRules in a bit more detail.
If you don't find a better, more standard way to do this, the extension TODO Highlight would work for you. It is typically used to highlight special comments for yourself like "FIXME" but could be used in your case with a regex like:
"todohighlight.keywordsPattern": "\\s*<\\s*\\/{0,1}ext:.*\\s*>",
And then you can set the coloring any way you want:
"todohighlight.defaultStyle": {
"color": "red",
// "letterSpacing": "1px",
// "backgroundColor": "rgba(170,102,0,1)",
"backgroundColor": "transparent"
// "borderRadius": "4px",
"isWholeLine": false
},
Related
Ok, I am new to coding and just found out about costume snippets in VS-Code. I wrote some and they all worked pretty much as expected, but now I have some problems/questions. I have done some research but couldn't find any solutions.
1. how do I enable for example this snippet only in strings? Is there even a way? I don't want all my snippets to work in strings, just some.
"tab": {
"prefix": ["tab"],
"body": [
"${1|\\t,\\t\\t,\\t\\t\\t,\\t\\t\\t\\t,\\t\\t\\t\\t\\t,\\t\\t\\t\\t\\t\\t|}$0"
],
"description": "insert escaped tab"
},
adding this to the settings enables all snippets in strings which i don't want
"editor.quickSuggestions": {
"strings": true
},
2. I have written a snippet that should insert some lines into my launch.json file and it basically works the way I want, but only if I put the snippet in my global snippet file and not set the scope to json. It also does not work if I put it in the json snippet file (json.json). Why?
"launch json": {
// "scope": "json",
"prefix": "launch",
"body": [
"\"version\": \"0.2.0\",",
"\"configurations\": [",
"\t{",
"\t\t\"type\": \"${1|firefox,chrome|}\",",
"\t\t\"reAttach\": false,", // is there a way to auto remove this line if chrome is chosen
"\t\t\"request\": \"launch\",",
"\t\t\"name\": \"Launch index.html\",",
"\t\t\"file\": \"\\${workspaceFolder}/index.html\"",
"\t}",
"],",
"$0",
],
"description": "insert launch json"
},
that's the snippets output
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"reAttach": false,
"request": "launch",
"name": "Launch index.html",
"file": "${workspaceFolder}/index.html"
}
],
also is there a way to change the inserted lines depending on what option I chose from the list?
it's not really necessary, just wondering (the "reAttach": false, option only exists with firefox, so i don't need the line if i choose one of the other options)
3. Another problem I have is that I copied and then customized some already existing snippets (for java for example) and now it is showing both options in intellisense. I know, I know, I can press F1 -> insert snippet and click the eye symbol behind them to hide them from intellisense but that only works if the snippet actually is in the list, which isn't true for all of them. I just can't find some of them. Where can I find and disable them?
4. One last thing, I tried making a snippet for css with "prefix": ["*","somethingElse"], but i could not use the snippet with the * only the somethingElse worked, why is that? I already made two other snippets that use . and # as prefix and they also worked just fine. Is there something special about * when it comes to snippets?
I have no idea how to fix the main 4 problems or what causes them. But one way I thought about solving the optional line problem was something like this:
"\t\t\"type\": \"${1|firefox,chrome|}\",${2:\n\t\t\"reAttach\": false,}",
that way I can delete the line with one button if I don't need it. But the question was more about if it's possible in general so change some other lines depending on the option chosen from the list.
I recently changed my color theme in VisualStudio Code, I like everything from the theme except for the light purple color of the <> tags, they clash with the pink. How can I change them so they're a different color, preferable just a darker purple. Btw the theme im using is called Tokyo Night Storm.
Here's an image showing how the angle brackets are currently colored:
I tried going into my settings.json couldn't find exactly what to write.
Use the Developer: Inspect Editor Tokens and Scopes action to open the Scope Inspector. Then click on the token you want to inspect. Then find out its textmate scopes. In this case, the opening angle bracket is:
punctuation.definition.tag.begin.html
meta.tag.structure.html.start.html
text.html.derivative
Pick an appropriate textmate scope, and then use it in a token colour customization like so:
"editor.tokenColorCustomizations": {
"[Tokyo Night Storm]": {
"textMateRules": [{
"scope":"punctuation.definition.tag.begin.html",
"settings": {
"foreground": "#FF0000",
"fontStyle": "bold"
}
},{
"scope":"punctuation.definition.tag.end.html",
"settings": {
"foreground": "#FF0000",
"fontStyle": "bold"
}
}],
}
},
See also the docs for creating your own colour theme.
There's weava highlighter extension which make it possible to highlights articles/pdf and store highlight on the server.
I can't understand how does it keep highlights after the page reloaded. What does need to be stored to find the highlighted section after the page reloaded? I can't store text, because text can be duplicated. CSS selectors not enough too, how does it work?
Tried to debug the extension, but the code is highly uglified and it's difficult to understand what's going on.
Actually, it stores enough text to describe the beginning and the end of the section to ensure uniqueness, found following traces in the console:
"-MI0L15LAX*************": {
"accessRight": {
"HZTU1cv32******************": "owner"
},
"createDate": 1600971612666,
"creator": "HZTU1cv32******************",
"favIconUrl": "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196",
"highlights": {
"d1311a13-d334-467c-8915-5faf412a689f": {
"colorNum": 3,
"creator": "HZTU1cv32p******************",
"date": 1600972075045,
"endStr": "afterthepagereloaded?ican'tsto",
"startStr": "tobestoredtofindthehighlighted",
"text": "section"
}
},
"title": "html - How does weava highlighter extension works under the hood? - Stack Overflow",
"url": "https://stackoverflow.com/questions/64052135/how-does-weava-highlighter-extension-works-under-the-hood",
"version": "0.0.3"
}
It isn't perfect, and error-prone (I was able to trick it to highlight the wrong section), but it looks that there's enough for most people.
Another drawback of such an approach, if the article changed a little bit (typo, etc...) the highlights can be lost.
I found out this particular file which can defined behavior of brackets, etc, in a specific language:
https://code.visualstudio.com/api/language-extensions/language-configuration-guide
I would like to simply configure the addition of '$' before and after selected text in LaTeX documents, using for example 'alt+$' keybinding.
So far, it's not clear to me how to do that, even with the documentation pages I stumbled upon.
(https://code.visualstudio.com/api/references/contribution-points#contributeslanguages for example).
I would think that you could simply do that in keybindings.json but it appears you can't (or I don't know how).
Any idea?
If I understand correctly try this snippet:
{
"key": "shift+alt+4",
"command": "editor.action.insertSnippet",
"args": {
"snippet": "$${TM_SELECTED_TEXT}$"
},
"editorLangId == latex"
},
For where to put that snippet see https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets
It doesn't seem you can use alt+$ directly but shift+alt+4 is the same thing.
Just like it happens for standard HTML elements like div I'd like to write documentation for my own custom Angular components that gets displayed when hovering them in some other template (my rer-card component for example)
I tried adding
/**
* Test!!
*/
comments almost everywhere in the component but nothing happens.
Is it possible?
v1.31 has added some functionality to custom html and css, see custom html and css data support
Today, front-end developers often code in a superset of HTML/CSS:
Web
Components allow custom HTML elements such as .
PostCSS allows custom CSS properties such
as size and not-yet-standardized CSS features such as :any-link.
Various frameworks allow even greater flexibility in the source
HTML/CSS.
In this iteration, we improved the HTML custom data support
introduced in 1.30 and added CSS custom data support. Use
html.experimental.customData or css.experimental.customData to load
custom data. (html.experimental.custom.tags and
html.experimental.custom.attributes are removed.) Alternatively,
bundle the JSON into an extension with
contributes.html.experimental.customData or
contributes.css.experimental.customData.
Finally, if you are writing a
Language Server that uses vscode-html-languageservice or
vscode-css-languageservice, you can create the Language Service with
custom data. Custom data enhances VS Code's understanding of HTML/CSS.
For example, with these HTML/CSS JSON contributions, VS Code could
provide completion and hover for the custom HTML tag/attribute and CSS
property/pseudoClass:
{
"version": 1,
"tags": [{
"name": "my-button",
"description": "My button",
"attributes": [{
"name": "type",
"description": "My button type",
"values": [
{ "name": "alert" }
]
}]
}]
}
{
"version": 1,
"properties": [{
"name": "my-size",
"description": "Compiles down to `width` and `height`. See details at https://github.com/postcss/postcss-size."
}],
"pseudoClasses": [{
"name": ":my-link",
"description": ":any-link pseudo class. See details at https://preset-env.cssdb.org/features#any-link-pseudo-class."
}]
}
See the link at the top of this answer for more links on how to use this functionality.