Skip to content

Instantly share code, notes, and snippets.

@nickytonline

nickytonline/customizing-vs-code.md

Last active October 12, 2024 16:49
Show Gist options
  • Save nickytonline/8086319bf5836797ee3dea802a77000d to your computer and use it in GitHub Desktop.
Save nickytonline/8086319bf5836797ee3dea802a77000d to your computer and use it in GitHub Desktop.
Download ZIP
Customizing VS Code for Two Fonts.
Raw
customizing-vs-code.md

Customizing VS Code

I followed the instructions in this blog post Multiple Fonts: Alternative to Operator Mono in VSCode, but did not see any changes made to VS Code. After digging a bit, I discovered that all the CSS class names had changed. They’re now e.g. .mtk13, .mtk16 { … }.

Gotchas

  • Ensure it’s a file URL e.g. { "vscode_custom_css.imports": [ "file:///Users/Brian/Desktop/vscode-style.css" ] }
  • If you move the location of your file and update your user settings with the new location, you will need to disable and enable custom CSS cmd+shift+p.
  • Also, anytime you change the style in your custom CSS file, you need to disable, then re-enable the extension.

For reference

Raw
settings.json
// Add these to your VS Code settings.json
"editor.fontFamily": "'Fira Code', Consolas, monospace",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"vscode_custom_css.imports": [
"file:///path/to/your/styles/styles.css" // styles.css in this gist.
],
Raw
styles.css
/*
I decided on the Brush Script MT cursive font for now. Works better for me than FlottFlott.
*/
.mtk3,
.mtk13,
.mtk16 {
margin-left: 1px;
font-family: "Brush Script MT";
font-size: 1.6em;
}
.mtk4 {
font-family: "Brush Script MT";
font-size: 1.4em;
}
/*
For the tab titles.
*/
.monaco-icon-label-description-container .label-name {
font-family: "Brush Script MT";
font-size: 1.3
em;
}
.tabs-container .monaco-icon-label-description-container .label-name,
.sidebar .monaco-icon-label-description-container .label-name,
.quick-open-row .monaco-icon-label-description-container .label-name {
font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
font-size: 1em;
}
@konrei
Copy link

konrei commented Feb 3, 2018

it didn't work :/

@rzvdaniel
Copy link

rzvdaniel commented Feb 9, 2018 •
edited
Loading

Hello wheldrak3,

How I made it work :)

Update: I wrote a Medium article about how to fix the issues: "Customize Visual Studio Code for Multiple Fonts and styles."
https://medium.com/@rzvdaniel_71068/customize-visual-studio-code-for-multiple-fonts-and-styles-96f83562af58

  1. Install vscode-custom-css extension
    https://github.com/be5invis/vscode-custom-css/blob/master/README.md
    Without it, the statement "vscode_custom_css.imports" is not recognized as a valid one inside user settings (settings.json)

  2. Make sure vscode-custom-css is enabled after installation
    Do this: CTRL + SHIFT + P and then type "Enable Custom CSS and JS" as documented on their official page above.

  3. Make sure you have the font (Brush Script MT)

  4. make sure the path to the custom CSS is like this (for Windows version):
    "vscode_custom_css.imports": ["file://C:/Users/daniel/Desktop/styles.css"]

  5. Restart VS Code.

  6. You'll notice that the comments inside Javascript files are now rendered using Brush Script MT font, but some other keywords aren't. This is caused by the constant change in style names for VS Code, as the author of the gist also noted. To fix this, do the following:

  • Navigate to Help -> Toggle Developer Tools in VS Code.
  • Use Select Inspector to highlight the keywords you wish to render using the new font and see what is their style (same as you inspect your elements in Chrome).
  • Add your new style names in the custom styles.css.
    For example, I had to add .mtk7 to make "import" statements be rendered with the new font.
    .mtk7,
    .mtk3,
    .mtk13,
    .mtk16 {
        margin-left: 1px;
        font-family: "Brush Script MT";
        font-size: 1.6em;
    }

I hope it helps,
Razvan

@konrei
Copy link

konrei commented Feb 27, 2018

Thx, it worked :) 👍 ❤️

@SusanthCom
Copy link

@rzvdaniel 👍 Thank you for detailed info ...

@l3aconator
Copy link

If you want to keep scoped to just javascript, add [data-mode-id="javascript"] before the selector

[data-mode-id="javascript"] .mtk5 {
  margin-left: 1px;
  font-family: "flottflott";
  font-size: 1.6em;
}

@bcbane
Copy link

bcbane commented Jul 30, 2018

I'm not sure why, but the cursive font is overwriting my code ligatures from FiraFont. I think one of the classnames is the issue

@u-l-y
Copy link

u-l-y commented Aug 16, 2018

Thank you very much guys, now my VSC looks like my lovely Atom design config!

@techieshark
Copy link

This is great, thanks.

Might also be of interest to folks here: https://github.com/kencrocken/FiraCodeiScript

@mcdurdin
Copy link

In order for cursor tracking to work when you change fonts via CSS rules, you'll want to set editor.disableMonospaceOptimizations: true in your settings.json file.

@kalyantm
Copy link

Hello wheldrak3,

How I made it work :)

Update: I wrote a Medium article about how to fix the issues: "Customize Visual Studio Code for Multiple Fonts and styles."
https://medium.com/@rzvdaniel_71068/customize-visual-studio-code-for-multiple-fonts-and-styles-96f83562af58

  1. Install vscode-custom-css extension
    https://github.com/be5invis/vscode-custom-css/blob/master/README.md
    Without it, the statement "vscode_custom_css.imports" is not recognized as a valid one inside user settings (settings.json)
  2. Make sure vscode-custom-css is enabled after installation
    Do this: CTRL + SHIFT + P and then type "Enable Custom CSS and JS" as documented on their official page above.
  3. Make sure you have the font (Brush Script MT)
  4. make sure the path to the custom CSS is like this (for Windows version):
    "vscode_custom_css.imports": ["file://C:/Users/daniel/Desktop/styles.css"]
  5. Restart VS Code.
  6. You'll notice that the comments inside Javascript files are now rendered using Brush Script MT font, but some other keywords aren't. This is caused by the constant change in style names for VS Code, as the author of the gist also noted. To fix this, do the following:

  • Navigate to Help -> Toggle Developer Tools in VS Code.

  • Use Select Inspector to highlight the keywords you wish to render using the new font and see what is their style (same as you inspect your elements in Chrome).

  • Add your new style names in the custom styles.css.
    For example, I had to add .mtk7 to make "import" statements be rendered with the new font.

    .mtk7,
    .mtk3,
    .mtk13,
    .mtk16 {
    margin-left: 1px;
    font-family: "Brush Script MT";
    font-size: 1.6em;
    }
    I hope it helps,
    Razvan

Thanks a ton dude, looks amazing now!!

@msis-adrian
Copy link

msis-adrian commented Dec 26, 2019 •
edited
Loading

Solved: For what it's worth, extension never worked for me....However, while i was in there...if you go to the help menu, toggle the Developer Tools....
Check the network tab > you will see there is one css file that vscode loads up.

file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

I went into this file and directly edited the css directly...

since i already had a css file that i intended to use with this extension...

@import url("file:///Users/myaccountfolder/someGoodLocationFolder/.vscode/vs-code-styles.css");

Reload & Problem solved.

For example, i love my font but all i wanted was the tag to be with a different font-family then the attributes. After some trial and error, this did it. Mileage may very depending on whether or not vscode is changing these classes all the time.

span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
    font-family: 'Courier New' !important;
}

@Karthik-Nayak98
Copy link

It's not working for me I am ubuntu 20.04 and my version of VScode is 1.47.3. How to make it work?

@farshadb
Copy link

Solved: For what it's worth, extension never worked for me....However, while i was in there...if you go to the help menu, toggle the Developer Tools.... Check the network tab > you will see there is one css file that vscode loads up.

file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

I went into this file and directly edited the css directly...

since i already had a css file that i intended to use with this extension...

@import url("file:///Users/myaccountfolder/someGoodLocationFolder/.vscode/vs-code-styles.css");

Reload & Problem solved.

For example, i love my font but all i wanted was the tag to be with a different font-family then the attributes. After some trial and error, this did it. Mileage may very depending on whether or not vscode is changing these classes all the time.

span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
    font-family: 'Courier New' !important;
}

Could you please explain to me the relationship between styles.css and mtk? every time that I change my theme stlyes.css does not work properly and each .mtk in each theme refers to a specific part of the codes, I'm confused about how to write styles.css that works with each theme, and after all I just want wot change the font for keywords but in includes operators(+=><) that I do not want to

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment