Skip to content

Instantly share code, notes, and snippets.

@mohokh67
Last active October 17, 2024 14:01
Show Gist options
  • Save mohokh67/63bd7d6fb1f2bb381e47cfb0478de071 to your computer and use it in GitHub Desktop.
Save mohokh67/63bd7d6fb1f2bb381e47cfb0478de071 to your computer and use it in GitHub Desktop.
Install italic and customizable font for vscode

Link to Youtube video: https://youtu.be/QxcRmsGHcWY

Manual steps:

  • Download and install Victor Mono font
  • Update VSCode setting as bellow:
    • font size, line height and font weight are optional and you can update them as you prefer
{
  "editor.fontSize": 13,
  "editor.lineHeight": 24,
  "editor.fontWeight": "600",
  
  "editor.fontFamily": "Victor Mono, Fira Code",
  "editor.fontLigatures": true,
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "emphasis",
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "scope": "strong",
        "settings": {
          "fontStyle": "bold"
        }
      },
      {
        "scope": "entity.other.attribute-name",
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "scope": "markup.underline",
        "settings": {
          "fontStyle": "underline"
        }
      },
      {
        "scope": "markup.bold",
        "settings": {
          "fontStyle": "bold"
        }
      },
      {
        "scope": "markup.heading",
        "settings": {
          "fontStyle": "bold"
        }
      },
      {
        "scope": "markup.italic",
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "name": "String interpolation",
        "scope": [
          "punctuation.definition.template-expression.begin",
          "punctuation.definition.template-expression.end",
          "punctuation.section.embedded"
        ],
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "name": "this.self",
        "scope": "variable.language",
        "settings": {
          "fontStyle": "italic",
          "foreground": "#ff5874"
        }
      },
      {
        "name": "@Decorator",
        "scope": ["meta.decorator punctuation.decorator"],
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "scope": ["punctuation.definition.comment", "comment"],
        "settings": {
          // "foreground": "#ff5874",
          "fontStyle": "italic"
        }
      },
      {
        "scope": [
          //following will be in italic =FlottFlott
          "entity.name.type.class", //class names
          "keyword", //import, export, return…
          "constant", //String, Number, Boolean…, this, super
          "storage.modifier", //static keyword
          "storage.type",
          "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": ""
        }
      }
    ]
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment