Change style of VS Code Markdown `code` syntax highlighting - visual-studio-code

I just installed VS Code 1.70.0 on a new machine, and imported settings by copying settings.json from the old machine. I opened a Markdown (.md) file, and oddly the code segments marked with backtick characters are very hard to see. For example, both "foo" and "bar" below appear to be the same style.
foo `bar`
I zoomed in with the magnifier, but even then the style looks almost identical to the other text—the red color is very faint. This is the same monitor as before, so maybe it is related to the video driver on the new computer.
Is there some way to tweak the syntax highlighting just for inline code formatting for Markdown in VS Code?

Yes, you can tweak the color by:
Go to Command Palette and find "Preferences: Open User Settings (JSON)"
In the settings.json that it opened, add the following field:
"editor.tokenColorCustomizations": {
"[YOUR COLOR SCHEME]": {
"textMateRules": [
{
"scope": "markup.inline.raw.string.markdown",
"settings": {
"foreground": "#aaff00", // <-- Change your color here
}
}
]
}
}
In the 2nd line of the above code, change YOUR COLOR SCHEME to the name of the color scheme you are using. For example, my color scheme is called "Monokai Pro" so the 2nd line would be:
"[Monokai Pro]" : {
Change the color to whatever you like in the "foreground" field. For example, I'm using #aaff00 (lime color) and this is how it looks like:
Tip
You may wonder how do I know that the "scope" field should be "markup.inline.raw.string.markdown". To see which TextMate scope that the markup inline code belongs to:
Open Command Palette and search for "Developer: Inspect Editor Tokens and Scopes"
Place your mouse caret inside the markdown inline code

Related

How to edit the color theme for mathematical operators (+, -, =, .etc) in Visual Studio Code?

I'm trying to personalize the color theme on Visual Studio Code because I'm used to a certain theme on a another software. So I want to change the color of the mathematical operators (+, -, =, ...).
I tried scrolling through the different options under workbench.colorCustomizations and editor.tokenColorCustomizations but I can't seem to find anything that changes the color of the operators.
Does anyone know which keyword covers the operators?
The first things you need to do is to find the token name/scopes of the operatos. You can do this by open vscode command palette Ctrl + Shift + P then search for Developer: Inspect Editor Tokens and Scopes, check the scopes by moving you caret.
After finding the scope name, open your vscode JSON settings, and create new textMateRules, it's looks like this:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": ["bold.inline.source.post"],
"settings": {
"foreground": "#D55"
}
}
]
}
Reference: vscode syntax highlighting

How to highlight current line number in Visual Studio Code / VS Code

I am in the process of migrating from Atom to VS Code, as it seems to be what all the cool kids use these days.
In atom I was able to highlight the current line number as pictured (the blue highlight in the gutter).
Is there a way to do this in VS Code? With a setting or extension? Can't find a way to do it, and really missing that obvious at-a-glance indication of where I'm working.
(I know that I can add a background to the current line itself, but this is too intrusive to the code, especially working with a variety of languages in different colours.)
Thanks!
You could try
"editor.renderLineHighlight": "gutter"
UPDATE
In an ideal world I'd want both the gutter and the line itself highlighted, but in 2 very different colours - sadly that one doesn't seem possible, but this option is better than nothing!
Well, you may try something like settings below, liner number in different color as well as box for the line
"editor.renderLineHighlight": "all",
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000000",
"editor.lineHighlightBorder": "#0000ff"
}
To address dark and light themes
In the settings.json file add something like:
"workbench.colorCustomizations": {
"[Default Dark+]": {
"editor.lineHighlightBackground": "#00000071",
},
"[Default Light+]": {
"editor.lineHighlightBackground": "#0000003f",
}
},

VScode JS syntax color for Object Key

I am trying to set color for object key: {key:'string'}
Closer I got is adding in settings.json this:
"workbench.colorCustomizations": {},
But what settings should I add further?
If the OP or anyone is still looking for an answer to this question.
In your settings.json file
"workbench.colorCustomizations": {
"textMateRules": [
{
"scope": "meta.object-literal.key",
"settings": {
"foreground": "#FF0000", // any color you like
// any other styling you want to apply
}
}
]
}
to get the correct scope you can open up the command panel on your javascript/typescript/any file in vscode with
cmd+shift+p or
ctrl+shift+p on a PC.
Search: >Developer: inspect Editor Tokens and Scopes
Then you can click on specific syntax to get the correct scope.
You'll get something looking like this:
If you want the styling to only apply to a specific theme
the following will help you
https://egghead.io/lessons/vs-code-adding-custom-syntax-highlighting-to-a-theme-in-vscode

Change (or add) background color in VS Code when renaming from Explorer

In the image below I'm actually in "rename" and I'm highlighting something but there's no highlight. You'll notice there's no cursor as well because it's highlighting. This is driving me a bit bonkers because I'm either counting how many left/right arrow keys I'm moving and such to know where I am. I tried the following colors but none of these seem to do anything (in the Explorer):
"workbench.colorCustomizations": {
"editorRuler.foreground": "#fc199a22",
"editor.selectionBackground": "#ab3beb3f",
"editor.selectionHighlightBackground": "#136460e3",
"editor.findMatchBackground": "#00cc44a8",
"editor.findMatchHighlightBackground": "#d0ff004d",
"scrollbarSlider.background": "#FC199A2c"
},
I tried inspecting the element in the developer console in VS Code but the rename closes when it blurs out of the field which I need to do to select the element to know what the CSS class is to style it.
I didn't see a "rename" or highlight color for the explorer here either: https://code.visualstudio.com/api/references/theme-color#editor-colors
Any help would be super appreciated.
You can use the following property:
"selection.background" : "#FF0"
The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
A caveat to this approach is that it is applied globally, not just the explorer view

Custom color setting (for entity.name.function.js) from settings.json overridden by latest VSCode update

Latest update of VS Code changed color of at least one element I had customized for js via settings.json (entity.name.function.js). The color is changed for keywords like resolve, then, reject, bind, but not all function names(!). Other of my custom colors seem to remain unaffected. I did not change anything in the settings.json.
When I open the Developer: Inspect Editor Tokens and Scope option and select the elements of the code with incorrect color I see:
foreground entity.name.function.js { "foreground": "#9493DA" }
which suggests the custom color definition is recognized by VS Code, but not applied for some reason.
What can be the reason and how to make VS Code apply the desired styling?
Apparently the update changed classification of some keywords from support.function.js to support.function. After adding the latter to settings.json color was applied properly.