23

After watching a Sublime3 screencast by a famous python programmer, I found that display code comment in a fancy font is a great idea, which let comment more distinguishable and makes comment reading more pleasant. One example is like below:

sublime text 3 screencast

In this demo, code comment is shown in a light color hand-written like font, making it easier to be distinguished from the real code and keeping the comment fun to read at the same time.

I went through https://code.visualstudio.com/docs/getstarted/ but can't seem to find the setting for changing the comment font for code.

So I am wondering how to set a another font for comment against normal code font.

Gama11
  • 31,714
  • 9
  • 78
  • 100
pambda
  • 2,930
  • 2
  • 22
  • 32
  • 2
    See https://stackoverflow.com/questions/48838578/any-way-to-change-the-font-family-of-only-commented-code-in-vscode for italics at least. – Mark Mar 07 '18 at 22:37
  • For anyone on a Mac, or with Unity, this may help: https://stackoverflow.com/a/63301180/294884 – Fattie May 25 '21 at 18:32
  • I made an update on this topic with a nice answer [there](https://stackoverflow.com/a/76688708/10798114) – Onyr Jul 14 '23 at 14:37

4 Answers4

8

Download font https://www.dafontfree.net/freefonts-script12-bt-f141942.htm

Install package https://github.com/be5invis/vscode-custom-css

Create new css file ~/.vscode/vs-code-styles.css

Paste in this CSS:

/* Set italics and comments to the script font */
.mtk3, .mtk4 {
    font-family: 'Script12 BT';
    font-size: 1.2em;
    font-style: normal;
    color: #57a649!important;
}
.comment {
  font-family: 'Script12 BT';
  font-style: italic;
  font-size: 1.2em;
  color: #57a649!important;
}
.comment:not(.punctuation) {
    font-family: 'Script12 BT';
    font-size: 1.5em;
    color: #57a649!important;
}

Go to Code > Preferences > User Settings

// Somewhere in your user / workspace settings file !

.
.
.
.

"vscode_custom_css.imports": ["file:///<PATH TO CSS FILE>/.vscode/vs-code-styles.css"],
"vscode_custom_css.policy": true,
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "comment",
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

Source: https://gist.github.com/psgganesh/d0815ece4b19ce24dde98e21d55f53f5

kurdtpage
  • 3,142
  • 1
  • 24
  • 24
  • 1
    not throwing shade and maybe its because I haven't woke up yet, but for some reason I love that your answer includes using nano to create/edit a css file versus using vscode, given the context – Luke Feb 18 '22 at 12:54
  • 2
    Old habits die hard haha – kurdtpage Feb 19 '22 at 00:43
3

Yes, you can change the font used for comments however for something so apparently simple, it is rather long winded and the results are not 100% perfect. For instance you may find that the cursor is slightly further away from the resulting text when you write comments. If you can live with this, here is the process.

Here is my set-up, just to show it can be done:

enter image description here

You are going to do the following:

  • Create a global custom stylesheet that alters the appearance of comments for all projects.

  • Create a link to this stylesheet in VS Code's settings.json

  • Install a plugin that ensures VS Code registers your custom styles.

Create the stylesheet

You need to go to the root of your VS Code installation for this part. I'm on Mac so you will need to identify your own path if on PC.

For me on a Mac this is Users/username/.vscode/

Navigate to that directory in terminal and then touch style.css to create the stylesheet.

Once you have made the stylesheet, you will want to add your font rule. But first you need to know what class to target. To identify the class, open Dev Tools within VS Code. Then hover over a comment to see the class. Mine is .mtk3 but I've heard these vary across updates so best to check for yourself.

Ok, now add the style, e.g

.mtk3 {
   font-family: "iosevka";
   font-size: 1em;
   font-style: italic;
}

Link to your stylesheet

Now we need to make sure that VS Code knows about the stylesheet. So open up settings.json. (You want the global file with this name, not any local ones you may have in your individual projects.) Once you have this open, add the following entry:

"vscode_custom_css.imports": ["file:///Users/username/.vscode/style.css"],

Note that you are specifying a JSON array for the file, not a single value. Obviously the path should be your own. Bear in mind this is a link reference not actually a file path so you may need to prepend the path with the Windows equivalent of file://.

Install the plugin

This still isn't enough to get the styles working. You need to be able to run the command update custom css and js from within the editor and this doesn't come as default. So install the following plugin: Custom CSS and JS Loader .

Once installed you can Cmd+Shift+P and type 'Enable custom CSS and JS'. The option appears, select it. Now restart VS Code, or run reload window, you should have your fancy comment font.

As I say, the cursor acts a bit erratically but it's not too distracting as you don't write comments much compared to code. It may be that I need to target more mtk classes. Maybe someone can elaborate on this in the comments, if they know the reason.

Thomas Bishop
  • 105
  • 1
  • 1
  • 7
2

I had the same issue and it seems you can only make comments italic but cannot change to a separate font. I ended up combining a regular and italic font I liked into a font family which worked.

Download a font editor (FontForge) and create a font family of your own (ex: Custom Font) by changing a regular font you like to Custom Font Regular.ttf and an italic font you like to Custom Font Italic.ttf. Just keep the family name the same.

FontForge Example:

  • Open your desired fonts separately in FontForge.
  • From Element -> Font Info just change
    1. "Fontname" : CustomFont-Regular, CustomFont-Italic
    2. "Family Name" : Custom Font (keep these the same for both)
    3. "Name For Humans" : Custom Font Regular, Custom Font Italic
    4. Don't touch anything else and hit OK.
    5. Accept if/when it asks to change ID
    6. File -> Generate Font as True Type
    7. Install your newly named ttf fonts
    8. Then add your new family to vs code. (If you're following along that's "Custom Font")

Pretty straightforward and works great in VS Code. Hope this helps somebody

Jeff
  • 71
  • 7
  • Oooh this is awesome. Hadn't even thought about that. Will definitely have to do this. I love having such a visual distinction between between code and comments. – Ryan Mcguinn Jan 02 '23 at 02:06
  • I feel the same way @RyanMcguinn happy this technique reached you. – Jeff Jan 05 '23 at 01:21
2

Or just use the free font Cascadia Code by Microsoft and boom! All your comments will turn into a handwriting font. enter image description here Cheers!

okkadu
  • 113
  • 10