../monaspace-vs-code-install

Monaspace VS-Code install

monaspace font in action
This font is so pretty and has so many features its amazing. It's main downside is to work it takes to set it up.

To install the Monaspace font on macOS (or windows or linux) with VS Code and enable multifont syntax highlighting with the CSS JS Loader extension, you can follow these steps:

1. Download and install the Monaspace font:

First visit https://github.com/githubnext/monaspace/releases/latest and download the zip. Next to install the Monaspace font:

2. Configure VS Code

Install the Custom CSS and JS Loader plugin. Set the font to one of the following options: Monaspace Neon Var, Monaspace Argon Var, Monaspace Xeon Var, Monaspace Radon Var, or Monaspace Krypton Var.

the available varients of the font

Next enable font ligatures in the settings.json with following snippet:

settings.json

"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', calt', 'dlig'",

Now enable the custom CSS file within the settings.json, modifying the file path for Windows / MacOS / Linux if needed:

still settings.json

"vscode_custom_css.imports": [
    "file:///Users/{{user}}/.vscode/style.css", // for mac (remove if not mac)
    "file://C://Users/{{user}}/vscode/style.css" // for windows (remove if not windows)
    "file:///home/{{user}}/.vscode/style.css" // for linux (remove if not windows)
],

3. Create custom CSS file at the path you specified above.

Depending on your VS Code version, the class names might be different, so you may need to use the developer tools to find the correct one. The styles that worked for me on VS Code version: 1.84.2 (Universal) commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e are here:

style.css

/* Comment Class */
.mtk3 {
    font-family: "Monaspace Radon Var";
    font-weight: 500;
}

/* Copilot Classes */
.ghost-text-decoration {
    font-family: "Monaspace Krypton Var";
    font-weight: 200;
}

.ghost-text-decoration-preview {
    font-family: "Monaspace Krypton Var";
    font-weight: 200;
}

Thanks to @fspoettel on GitHub for this trick to get the copilot classes when in dev mode

“You can inspect transient DOM elements by halting the app with a debugger after a delay with a debugger call inside a setTimeout.”

@fspoettel

You can copy the following snippet to do just that!

console

setTimeout(() => {
    debugger;
}, 10000);

Before you are finished make sure you have run the Enable Custom CSS and JS command from the command bar.

Closing Remarks

That should be it! Hopefully you will have a beautiful custom font VS Code install.

If you are looking for a good theme, I can highly recommend the Catppuccin theme, as that is what I use myself. Be sure to check out Monaspace’s webstite as it is a work of art. Happy Coding! 👩‍💻

|tutorial| |archival|