Interesting Font for Code

Lounge
1

Back in May19 @bladewolf55 mentioned in a post the font Fira Code. This was recently highlighted by @bedwardly-down on GitHub who suggested I post this on the forum.

Basically using this font as your editor font, as well as in userstyle.css as a font for code blocks, adds quite a lot of interesting functionality to Joplin. I guess that this is because the editor and renderer Joplin uses is equipped to handle this type of font.

It enables you to use ligatures in your code. Rather than using <= or ~= the editor / font combo changes the text to the proper notation. Below is a graphic showing some “translations”.

firacode
firacode1764Ă—1946 301 KB

You can use settings to apply it as your editor font by specifying “Fira Code” as your editor font after installing the it (available as either .ttf & .otf). It’s unlikely you will want it as your base / body font for rendered notes as it is monospace, but if you use inline code or code blocks, adding it to your userstyle.css means that your notes will use the ligatures as well.

code {
font-family: "Fira Code";
}

Below is a screenshot where I have NOT used the font as the editor font but applied it to my userstyle.css for the element code.

pre

Here is where it has been applied to both the editor and the rendered pane.

post

Sure it is a bit specialised, but for some I am sure it would be very useful.

Finally, even if you do not use it for ligatures it is a very nice and readable editor font.

6 Likes
2

Nice to see this. I like adding the font to the Markdown stylesheet, it looks good.

Another good developer font with ligatures that recently came out is JetBrains Mono. It seems thoughtfully designed; I’m liking it so far, especially the classic not-equals sign.

image

2 Likes
3

I’ve been using Fira Code for about a year now as the editor font. Adding it to the userstyle.css for the code blocks is a great idea.

1 Like
4

Is it possible to enable this ligatures in the body text? Are there any cons?

5

@navarrothiago welcome to the forum.

You can use Fira Code as the font for rendered notes. The main "con" would be that it is a monospaced font and so not ideal for body text.

1 Like
6

I had fun with Fira Code for a while, but usually when I am rendering code, I need it to render as useable code and not with the special glyphs. I.e., the Python language understands != but not a crossed-out equals sign. I suppose what I am trying to say is that Fira Code is more useful for monospaced plaintext than it is for actual code (I think it is misnamed). But it also isn't really monospace either, is it?

I find it more novelty than useful. But, it can be cool to do something like this:

<style>
   .fira code { font-family: "Fira Code"; }
</style>

<div class="fira">
```plaintext
  i >= 0
  i != 0
```

2 Likes