Enable Fira Code and Ligatures in code cells
This tutorial shows how to enable the coding font Fira Code and Ligatures for code cells in your blog post generated with fastpages.
This tutorial is beginner friendly so if you already know about fira code
you might want to skip this part and move to Using Fira Code and Ligatures.
For those who are not familiar with fira code, it is one of the most popular fonts for coding, and the reason for that is - not only it’s an artistic font, it also provides Ligatures
which are symbols for common programming multi-character combinations.
Let’s take a look at some examples
Character Combination: ->
Ligature:
->
Character Combination: !=
Ligature:
!=
Character Combination: ==
Ligature:
==
There’s no reason to discuss all the details about the font, head to wikipedia for more information or go to the FiraCode GitHub link if you want to use fira code anywhere else and for other examples of ligatures and use cases.
Using Fira Code and Ligatures
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
.input_area pre, .input_area div, code {
font-family: 'Fira Code' !important;
font-variant-ligatures: initial !important;
}
Add these lines in /_sass/minima/custom-styles.scss
at root of your repository and you are good to go.
Use this link to get my other font-styles and if you decide to create a new font-style.scss
file as in my case, do not forget to add @import "minima/font-style";
in custom-styles.scss