How do I get Visual Studio Code to display italic fonts in formatted code?
FontsVisual Studio-CodeFonts Problem Overview
How do I configure VS Code to support italic styles, like in this picture?
My current settings:
{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}
Fonts Solutions
Solution 1 - Fonts
The direct answer to this question is (from this github page):
Add this to settings.json (ctrl + , or cmd + ,)
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic (=FlottFlott)
"comment",
"entity.name.type.class", //class names
"keyword", //import, export, return…
"constant", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
//following will be excluded from italics (VSCode has some defaults for italics)
"invalid",
"keyword.operator",
"constant.numeric.css",
"keyword.other.unit.px.css",
"constant.numeric.decimal.js",
"constant.numeric.json"
],
"settings": {
"fontStyle": ""
}
}
]
}
You can also provide other keywords in scope of course. Check VS Code's documentation and the scope keywords.
Explanation:
When you define a font for VS Code (e.g. Operator Mono for the OP), everything is rendered in that font. In order to achieve the look in the OP's image, you need to apply a different font style (italic/bold) to certain elements. Also, if your font has a significantly different italics style (e.g. Operator Mono has cursive ligatures), you will get a similar look to the OP's image.
Other considerations
In order for your italics to look different than your normal text, you need to be using a font whose italics, look different. Such a font is OperatorMono (paid), or FiraCodeiScript (free), or FiraFlott (free). I personally prefer FiraCodeiScript.
To make the italic characters linked, (not have spacing between them), like writing cursive, you need to enable font ligatures:
To do the above, make sure that your settings.json has the following:
{
"editor.fontLigatures": true,
"editor.fontFamily": "'Fira Code iScript', Consolas, 'Courier New', monospace"
}
The rest of the fonts are not needed, but they are fallback fonts in case that you are missing the first. Fonts with spaces in their names, usually need single quotes'. Also, you might need to restart VS Code.
Solution 2 - Fonts
First of all I know this thread is over a year old, but I was searching for the same thing without changing the main Dark+ theme, so I've put these in the settings.json of vs code, it might not be the most pretty but it works even on any theme you choose that doesn't have italic, and if you want to remove it just put it in comments, I've put the color in comments if you want to change it later!
"editor.tokenColorCustomizations": {
"textMateRules": [{
"name": "Comment",
"scope": [
"comment",
"punctuation.definition.comment"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#4A4A4A"
}
},
{
"name": "Keyword, Storage",
"scope": [
"Keyword",
"Storage"
],
"settings": {
"fontStyle": "italic"
}
},
{
"name": "Keyword Control",
"scope": [
"keyword.control"
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "entity.other.attribute-name",
"settings": {
"fontStyle": "italic",
//"foreground": "#78dce8"
}
},
{
"name": "entity.name.method.js",
"scope": [
"entity.name.method.js"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#82AAFF"
}
},
{
"name": "Language methods",
"scope": [
"variable.language"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#FF5370"
}
},
{
"name": "HTML Attributes",
"scope": [
"text.html.basic entity.other.attribute-name.html",
"text.html.basic entity.other.attribute-name"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#FFCB6B"
}
},
{
"name": "Decorators",
"scope": [
"tag.decorator.js entity.name.tag.js",
"tag.decorator.js punctuation.definition.tag.js"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#82AAFF"
}
},
{
"name": "ES7 Bind Operator",
"scope": [
"source.js constant.other.object.key.js string.unquoted.label.js"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#FF5370"
}
},
{
"name": "Markup - Italic",
"scope": [
"markup.italic"
],
"settings": {
"fontStyle": "italic",
//"foreground": "#f07178"
}
},
{
"name": "Markup - Bold-Italic",
"scope": [
"markup.bold markup.italic",
"markup.italic markup.bold",
"markup.quote markup.bold",
"markup.bold markup.italic string",
"markup.italic markup.bold string",
"markup.quote markup.bold string"
],
"settings": {
"fontStyle": "bold",
//"foreground": "#f07178"
}
},
{
"name": "Markup - Quote",
"scope": [
"markup.quote"
],
"settings": {
"fontStyle": "italic",
//"foreground": ""
}
},
{
"scope": "variable.other",
"settings": {
"foreground": "#82fbff"
}
},
{
"scope": "entity.name.function",
"settings": {
"foreground": "#dfd9a8"
}
},
{
"scope": "support.function",
"settings": {
"fontStyle": "italic",
"foreground": "#dfd9a8"
}
},
{
"scope": "string",
"settings": {
"foreground": "#CE9178"
}
},
]
},
Hope this helps anyone, and sorry again for posting on an outdated post.
Solution 3 - Fonts
Reinstate Monica's answer helped me, but I noticed everything wasn't italic in the same way I found on italic specific themes. I found a more comprehensive list of italic settings from https://github.com/wesbos/cobalt2-vscode/issues/116. Thank @bgarrant on github.
Add this to settings.json (ctrl + , or cmd + ,)
"editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic
"comment",
"emphasis",
"entity.name.method.js",
"entity.name.class.js",
"entity.name.tag.doctype",
"entity.other.attribute-name",
"entity.other.attribute-name.tag.jade",
"entity.other.attribute-name.tag.pug",
"keyword",
"keyword.control",
"keyword.operator.comparison",
"keyword.control.flow.js",
"keyword.control.flow.ts",
"keyword.control.flow.tsx",
"keyword.control.ruby",
"keyword.control.module.ruby",
"keyword.control.class.ruby",
"keyword.control.def.ruby",
"keyword.control.loop.js",
"keyword.control.loop.ts",
"keyword.control.import.js",
"keyword.control.import.ts",
"keyword.control.import.tsx",
"keyword.control.from.js",
"keyword.control.from.ts",
"keyword.control.from.tsx",
"keyword.operator.expression.delete",
"keyword.operator.new",
"keyword.operator.expression",
"keyword.operator.cast",
"keyword.operator.relational",
"keyword.operator.sizeof",
"keyword.operator.logical.python",
"italic",
"markup.italic",
"markup.quote",
"markup.changed",
"markup.italic.markdown",
"markup.quote.markdown",
"markup.deleted.diff",
"markup.inserted.diff",
"meta.delimiter.period",
"meta.diff.header.git",
"meta.diff.header.from-file",
"meta.diff.header.to-file",
"meta.tag.sgml.doctype",
"meta.var.expr",
"meta.class meta.method.declaration meta.var.expr storage.type.js",
"meta.decorator punctuation.decorator",
"meta.selector",
"punctuation.accessor",
"punctuation.definition.comment",
"punctuation.definition.template-expression.begin",
"punctuation.definition.template-expression.end",
"punctuation.section.embedded",
"quote",
"source.js constant.other.object.key.js string.unquoted.label.js",
"source.go keyword.package.go",
"source.go keyword.import.go",
"source.go keyword.function.go",
"source.go keyword.type.go",
"source.go keyword.struct.go",
"source.go keyword.interface.go",
"source.go keyword.const.go",
"source.go keyword.var.go",
"source.go keyword.map.go",
"source.go keyword.channel.go",
"source.go keyword.control.go",
"storage",
"storage.type",
"storage.modifier",
"storage.type.property.js",
"storage.type.property.ts",
"storage.type.property.tsx",
"tag.decorator.js entity.name.tag.js",
"tag.decorator.js",
"text.html.basic entity.other.attribute-name.html",
"text.html.basic entity.other.attribute-name",
"variable.language",
"variable.other.object.property"
],
"settings": {
"fontStyle": "italic"
}
}
]
}
NEW refined list I use 9/11/2021 Copy the block below
"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"window.zoomLevel": 1,
"cSpell.languageSettings": [
],
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic (=FlottFlott)
"comment",
"entity.name.type.class", //class names
"keyword", //import, export, return…
"constant", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
"entity.name.method.js",
"entity.name.class.js",
"entity.name.tag.doctype",
"entity.other.attribute-name",
"entity.other.attribute-name.tag.jade",
"entity.other.attribute-name.tag.pug",
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
//following will be excluded from italics (VSCode has some defaults for italics)
"invalid",
"keyword.operator",
"constant.numeric.css",
"keyword.other.unit.px.css",
"constant.numeric.decimal.js",
"constant.numeric.json"
],
"settings": {
"fontStyle": ""
}
}
]
}
Solution 4 - Fonts
You have to specify the font using the filename. If you have a font with an italic face, then this will work (I tried this on Mac).
For example:
"editor.fontFamily": "'OperatorMono-LightItalic'",
Solution 5 - Fonts
The following code is fine
{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}
You must have Operator Mono installed on your computer for that to work. It can be downloaded here: https://www.typography.com/fonts/operator/styles/ Current price at the time of writing this is $599.00 for one machine.
If you have the fonts installed and have restarted Visual Studio Code, try changing your theme. Some themes do not support the italic style.
Solution 6 - Fonts
First download a zip file from here. Then unzip it and install every file that has the .ttf extention by double clicking on it. After that go to VS Code and open settings with CMD + , or CTRL + , (on Windows machines) and type font. Under font family paste this 'Fira Code iScript' (include single quotations). This will start using fira code as the main font now. Only thing remaining is to add settings and tell VS Code when to actually utilize recursive fonts. For that, still in settings, type token color click on Token Color Customizations - open it in settings.json and paste this sucker in:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic (=FlottFlott)
"comment",
"entity.name.type.class", //class names
"keyword", //import, export, return…
"constant", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
//following will be excluded from italics (VSCode has some defaults for italics)
"invalid",
"keyword.operator",
"constant.numeric.css",
"keyword.other.unit.px.css",
"constant.numeric.decimal.js",
"constant.numeric.json"
],
"settings": {
"fontStyle": ""
}
}
]
},
That should do it for you! Remember to save the settings file!
Solution 7 - Fonts
"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,
Also restart VSCode after this.
Solution 8 - Fonts
For anyone wants to change exactly what you want, take the .json structure on the above answer and then take a look at this site at section 12.4 Naming Conventions
https://macromates.com/manual/en/language_grammars
You can change literally every element on every code line you wrote.
Solution 9 - Fonts
To make the vs code in italic format, please follow the below proceedure:
Step 1: Install Fira Code iScript (install them locally by opening .ttf files after downloading form github - direct link)
Step 2: You've to install Dark++ Italic theme.(VS Code direct link)
- In VScode press
ctrl/command + pto launch the command palette then run command:
ext install idbartosz.darkpp-italic
Step 3: Open VS Code setting in JSON and add the following lines
{
...
"editor.fontFamily": "Fira Code iScript",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"workbench.colorTheme": "Dark++ Italic",
...
}
Step 4: Now your editor will be awesome as you think. If you wanna do further customization, you can try the below instructions too.
VS Code uses the TextMate grammar syntax to define how it needs to render code. You can refer the official doc for further clarity. Still in settings.json, you can override the font style for the current theme by modifying the textMateRules under editor.tokenColorCustomizations.
You can find the sample as below:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
// the following elements will be in italic
// (=Fira Code iScript)
"comment",
"keyword.control.import.js", // import
"keyword.control.export.js", // export
"keyword.control.from.js", // from
// "constant", // String, Number, Boolean…, this, super
"storage.modifier", // static keyword
"storage.type.class", // class keyword
"storage.type.php", // typehints in methods keyword
"keyword.other.new.php", // new
"entity.other.attribute-name", // html attributes
"fenced_code.block.language.markdown" // markdown language modifier
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
// the following elements will be displayed in bold
"entity.name.type.class" // class names
],
"settings": {
"fontStyle": "bold"
}
},
{
"scope": [
// the following elements will be displayed in bold and italic
"entity.name.section.markdown" // markdown headlines
],
"settings": {
"fontStyle": "italic bold"
}
},
{
"scope": [
// the following elements will be excluded from italics
// (VSCode has some defaults for italics)
"invalid",
"keyword.operator",
"constant.numeric.css",
"keyword.other.unit.px.css",
"constant.numeric.decimal.js",
"constant.numeric.json",
"comment.block",
"entity.other.attribute-name.class.css"
],
"settings": {
"fontStyle": ""
}
}
]
}
Step 5: How to identify the tokens
To identify the TextMate token scope for a given element open up the command palette (ctrl + shift + p) and search for Developer: Inspect Editor Tokens and Scopes. This will bring up the Scope Inspector (opens new window)where you can get the identifier of the element you want to configure. Now you just have to click on the element you want to inspect and vscode will show you a list of matching scopes.
Solution 10 - Fonts
After checking the given answers, don't be demotivated. Maybe you, like me, didn't install all the fonts that comes in the package. In my particular case after i installed Firacode iScript Regular along with the Bold and Italic packages, the thing worked like charm.
Solution 11 - Fonts
I know this is somewhat an old question but I found myself on this thread when I was trying to set up operator mono on my Windows machine and had to spend sometime on it to make it work but if anyone else is looking for this it turns out it's as simple as the following on VS Code:
- Install Operator Mono Dark Theme
- Add the following to your settings.json:
"workbench.colorTheme": "Operator Mono Dark Theme",
"editor.fontFamily": "Operator Mono Light"
and that should do it.
Solution 12 - Fonts
The most straightforward way is to install a theme optimized specifically for Operator Mono. On VSCode marketplace there are quite a few of them including Solarized.