commit 409c78d38011b06475ec4f6c3a5ed48f0b2669ac · dunkirk.sh/zera

+102

content/blog/monaspace-vs-code-install.md

···

       1
       +
       +++

     

       2
       +
       title = "Monaspace VS-Code install"

     

       3
       +
       date = 2023-11-10

     

       4
       +
       slug = "monaspace-vs-code-install"

     

       5
       +
       description = "How to install the Github Next team's Monaspace font in VSCode"

     

       6
       +
       

     

       7
       +
       [taxonomies]

     

       8
       +
       tags = ["tutorial", "archival"]

     

       9
       +
       

     

       10
       +
       [extra]

     

       11
       +
       has_toc = true

     

       12
       +
       +++

     

       13
       +
       

     

       14
       +
       {{ img(id="https://assets.vrite.io/64974cb888e8beebeb2c925b/KuOAwCEm9ypWEemv60Qs7.png" alt="monaspace font in action" caption="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.") }}

     

       15
       +
       

     

       16
       +
       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](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css), you can follow these steps:

     

       17
       +
       

     

       18
       +
       ## 1. Download and install the Monaspace font:

     

       19
       +
       

     

       20
       +
       First visit [https://github.com/githubnext/monaspace/releases/latest](https://github.com/githubnext/monaspace/releases/latest) and download the zip.

     

       21
       +
       Next to install the Monaspace font:

     

       22
       +
       - On macOS, drag the font files into font book.

     

       23
       +
       - For windows, drag into the font window in settings.

     

       24
       +
       - For Linux, clone the repo and run: `cd util; ./install_linux.sh`

     

       25
       +
       

     

       26
       +
       ## 2. Configure VS Code

     

       27
       +
       

     

       28
       +
       Install the [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) plugin.

     

       29
       +
       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`.

     

       30
       +
       

     

       31
       +
       - You will find this option under _Editor: Font Family_ in the user preferences

     

       32
       +
       

     

       33
       +
       {{ img(id="https://assets.vrite.io/64974cb888e8beebeb2c925b/v0cMm5jcwHEgrvtBv4Syx.png" alt="the available varients of the font") }}

     

       34
       +
       

     

       35
       +
       

     

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

     

       37
       +
       

     

       38
       +
       > settings.json

     

       39
       +
       ```json

     

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

     

       41
       +
       ```

     

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

     

       43
       +
       

     

       44
       +
       > still settings.json

     

       45
       +
       ```json

     

       46
       +
       "vscode_custom_css.imports": [

     

       47
       +
           "file:///Users/{{user}}/.vscode/style.css", // for mac (remove if not mac)

     

       48
       +
           "file://C://Users/{{user}}/vscode/style.css" // for windows (remove if not windows)

     

       49
       +
           "file:///home/{{user}}/.vscode/style.css" // for linux (remove if not windows)

     

       50
       +
       ],

     

       51
       +
       ```

     

       52
       +
       

     

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

     

       54
       +
       

     

       55
       +
       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.

     

       56
       +
       The styles that worked for me on `VS Code version: 1.84.2 (Universal) commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e` are here:

     

       57
       +
       

     

       58
       +
       > style.css

     

       59
       +
       ```css

     

       60
       +
       /* Comment Class */

     

       61
       +
       .mtk3 {

     

       62
       +
           font-family: "Monaspace Radon Var";

     

       63
       +
           font-weight: 500;

     

       64
       +
       }

     

       65
       +
       

     

       66
       +
       /* Copilot Classes */

     

       67
       +
       .ghost-text-decoration {

     

       68
       +
           font-family: "Monaspace Krypton Var";

     

       69
       +
           font-weight: 200;

     

       70
       +
       }

     

       71
       +
       

     

       72
       +
       .ghost-text-decoration-preview {

     

       73
       +
           font-family: "Monaspace Krypton Var";

     

       74
       +
           font-weight: 200;

     

       75
       +
       }

     

       76
       +
       ```

     

       77
       +
       

     

       78
       +
       *Thanks to **[@fspoettel](https://github.com/fspoettel)** on GitHub for this trick to get the copilot classes when in dev mode*

     

       79
       +
       

     

       80
       +
       > "You can inspect transient DOM elements by halting the app with a `debugger` after a delay with a debugger call inside a `setTimeout`."

     

       81
       +
       >

     

       82
       +
       > <cite>[@fspoettel](https://github.com/fspoettel)</cite>

     

       83
       +
       

     

       84
       +
       You can copy the following snippet to do just that!

     

       85
       +
       

     

       86
       +
       > console

     

       87
       +
       ```ts

     

       88
       +
       setTimeout(() => {

     

       89
       +
           debugger;

     

       90
       +
       }, 10000);

     

       91
       +
       ```

     

       92
       +
       

     

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

     

       94
       +
       

     

       95
       +
       ## Closing Remarks

     

       96
       +
       

     

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

     

       98
       +
       

     

       99
       +
       If you are looking for a good theme, I can highly recommend the [Catppuccin](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc) theme, as that is what I use myself. Be sure to check out [Monaspace’s webstite](https://monaspace.githubnext.com/) as it is a work of art. Happy Coding! 👩‍💻

     

       100
       +
       

     

       101
       +
       * *Updated 2024-08-22: changed mtk4 to mtk3 on the feedback of [mutammim](https://github.com/mutammim)*

     

       102
       +
       * *Updated 2024-10-31: changed around the formating of the post and moved to [dunkirk.sh](https://dunkirk.sh)*