Skip to content

Instantly share code, notes, and snippets.

@chobijaeyu
Forked from rzvdaniel/customizing-vs-code.md
Last active January 30, 2020 05:29
Show Gist options
  • Save chobijaeyu/b965bdf43d5c8d5821bfd617e5b6dbb1 to your computer and use it in GitHub Desktop.
Save chobijaeyu/b965bdf43d5c8d5821bfd617e5b6dbb1 to your computer and use it in GitHub Desktop.
Customizing VS Code for Two Fonts.

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

{
"workbench.colorTheme": "Better Solarized Dark",
"vim.hlsearch": true,
"vim.useSystemClipboard": true,
"vim.visualstar": true,
"vim.foldfix": true,
"vim.easymotion": true,
"workbench.iconTheme": "material-icon-theme",
"go.useLanguageServer": true,
"editor.fontFamily": "Monaco,Hack Nerd Font",
"terminal.integrated.fontFamily": "Hack Nerd Font",
"debug.console.fontFamily": "Monaco,Hack Nerd Font",
"python.linting.pylintArgs": [
"--load-plugins=pylint_django"
],
"window.zoomLevel": 0,
"terminal.integrated.rendererType": "dom",
"leetcode.workspaceFolder": "/Users/yours/.leetcode",
"leetcode.defaultLanguage": "golang",
"leetcode.hint.configWebviewMarkdown": false,
"sync.autoUpload": false,
"[sass]": {
"editor.defaultFormatter": "syler.sass-indented"
},
"sync.gist": "8275d9a3d14b46b1360ab961fdc356dc",
"sass.lint.enable": true,
"editor.formatOnPaste": true,
"sass.format.debug": true,
"html.mirrorCursorOnMatchingTag": false,
"editor.fontLigatures": true,
"editor.fontSize": 13,
"vscode_custom_css.imports": [
"file:///Users/yours/.vscode/styles.css"
],
"vscode_custom_css.policy": true,
}
/*
I decided on the Brush Script MT cursive font for now. Works better for me than FlottFlott.
*/
.mtk3 {
font-family: 'operator mono';
font-size: 1rem;
}
.mtk9 {
font-family: 'operator mono';
font-size: 1.5em;
}
.mtk12 {
font-family: 'operator mono';
font-size: 1.1rem;
font-style: italic;
}
/*
For the tab titles.
*/
.monaco-icon-label-description-container .label-name {
font-family: "Brush Script MT";
font-size: 1.3em;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment