I have a lot of < and > (as alternatives for < and >) when writing my html files.
Which editor I need to use when I want to highlight < and > (lets say in yellow colour) inside Visual Studio Code?
Where is editor located?
Settings Ctrl+,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "constant.character.entity.html",
"settings": {
"foreground": "#ffff00",
}
},
]
},
Related
Example
I can't find the name for the px and s (which are green) values so i can change them inside the "editor.tokenColorCustomizations" in settings.json file.
"editor.tokenColorCustomizations": {
"textMateRules": [
{
// "name": "CSS Class and Support - Class",
"scope": [
"keyword.other.unit.px.css",
"keyword.other.unit.s.css",
],
"settings": {
"foreground": "#f00"
}
}
]
}
Use the tool from the Command Palette:
Developer: Inspect Editor Tokens and Scopes
See Scope Inspector.
I am trying to customize the color of HTML tags in react (.tsx files). So, I included the code below in settings.json file.
"editor.tokenColorCustomizations": {
"textMateRules": [
// TextMate grammars tokenization settings
{
"name": "JSX tags",
"scope": [
"entity.name.tag", // HTML tags (in JSX)
"entity.name.tag.html", // JSX Component tags
"meta.tag",
"meta.jsx"
],
"settings": {
"foreground": "#18da32"
}
}
]
},
However, even after the settings is applied, the color does not change (the color should be like so )
What is being displayed
However, when I use the developer tools it shows the right Hex code!
The other tag is displayed correctly (the dark orange color)
Is this some kind of bug or am i doing something wrong? I even closed VS code & started again but no use.
your settings.json is not a valid json it is missing outer curly braces.
{
"editor.tokenColorCustomizations": {
"textMateRules": [
// TextMate grammars tokenization settings
{
"name": "JSX tags",
"scope": [
"entity.name.tag", // HTML tags (in JSX)
"entity.name.tag.html", // JSX Component tags
"meta.tag",
"meta.jsx"
],
"settings": {
"foreground": "#18da32"
}
}
]
}
}
I should stipulate that I know how to change workbench.colorCustomizations and have some editor changes already. That said, I'm trying to figure out / find the correct syntax to customize the colors in scss files. The default has everything one tan color.
s there an extension or a native way to customize the colors within scss files such that elements, IDs and classes can have different colors? And, can you give me an example of working syntax I can add to my settings.json.
Fake example of what I'm looking for...
"workbench.colorCustomizations": {
"scss.elementColor": "#CA0000,
"scss.classColor": "#00dd00,
"scss.pseudoClassColor": "#CCCCCC,
"scss.idColor": "#CD078F,
}
You can do what you want with Textmate rules and scopes. For example, put this into your settings.json:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "entity.name.tag.css",
"settings": {
"foreground": "#00ff00", // fontstyle property as well
}
},
{
"scope": "entity.other.attribute-name.id.css",
"settings": {
"foreground": "#ff0000",
}
},
{
"scope": "entity.other.attribute-name.class.css",
"settings": {
"foreground": "#0000ff",
}
},
{
"scope": "entity.other.attribute-name.pseudo-element.css",
"settings": {
"foreground": "#000",
}
}
]
}
Works for both css and scss. You could limit it to one or other if you wish with more scopes.
Get your scopes using the Scope Inspector Tool from the Command Palette and see more at https://code.visualstudio.com/docs/getstarted/themes#_editor-syntax-highlighting and https://code.visualstudio.com/docs/getstarted/themes#_editor-semantic-highlighting.
How do I customize the color of HTML attributes like class="", href="", src="", style="" etc. in Visual Studio Code?
Open the settings.json file and add this:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope":"entity.other.attribute-name",
"settings": {
"foreground": "#ca9829",
"fontStyle": "italic"
}
}
]
}
You can set the theme too to only apply with that one, not globally. Here is a know-how for all this.
I've been fiddling around to highlight specific piece of text in vs code (C-syntax in this case)
For example what I would like to do is display a certain piece of text (e.g. "PieceOfText") and colorize this.
What I tried was to add rules below to the user settings, but that didn't work out. The problem is that there isn't a specific scope, because I don't want to link it to a define, enum or any scope other than the text itself.
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"name": "PieceOfText",
"scope": [
"PieceOfText"
],
"settings": {
"foreground": "#FF0000",
"fontStyle": "bold"
}
}
]
},