F i r a

How to Use FiraCode on Emacs

How to Use FiraCode on Emacs

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Fira Code is a popular programming font that supports ligatures, making your code look more visually appealing and readable. Emacs, on the other hand, is a powerful and customizable text editor used by many developers. 

In this article, we will guide you through the process of How to Use FiraCode on Emacs, enabling Fira Code ligatures, and customizing your Emacs font settings.

Installing FiraCode Font

Before integrating Fira Code with Emacs, you need to install the font on your system. Here are the steps for different operating systems:

  1. Windows: Download the font from the official repository1 and install it by right-clicking on the .ttf file and selecting “Install”.
  2. macOS: Double-click the .ttf file and then click “Install Font” in the pop-up window.
  3. Linux: Copy the .ttf file to ~/.local/share/fonts/ and then run fc-cache -f -v to update the font cache.
Configuring Emacs for FiraCode
Configuring Emacs for FiraCode

Configuring Emacs for FiraCode

To use Fira Code in Emacs, you can follow these two methods:

Option 1: Using Built-in Package Manager

Emacs has a built-in package manager called package.el. You can use it to install fira-code-mode, a package that enables Fira Code ligatures using prettify-symbols.

  1. Install fira-code-mode: Open Emacs and run M-x package-install RET fira-code-mode RET.
  2. Configure Emacs init file: Add the following lines to your Emacs init file (usually ~/.emacs or ~/.emacs.d/init.el):

lisp

(require ‘fira-code-mode)

(add-hook ‘prog-mode ‘fira-code-mode)

  1. Install Fira Code Symbol font: If you haven’t already, install the Fira Code Symbol font1 to enable additional ligatures.

Option 2: Manual Installation

If you prefer a manual installation, you can follow these steps:

  1. Install Fira Code Symbol font: Download and install the Fira Code Symbol font as described in the previous section.
  2. Edit Emacs configuration files: Add the following lines to your Emacs init file:

lisp

(set-face-attribute ‘default nil :family “Fira Code” :height 120)

(set-fontset-font t ‘(#Xe100 . #Xe16f) “Fira Code Symbol”)

(defvar fira-code-mode–old-prettify-alist)

(defun fira-code-mode–enable ()

  “Enable Fira Code ligatures in current buffer.”

  (setq-local fira-code-mode–old-prettify-alist prettify-symbols-alist)

  (setq-local prettify-symbols-alist (append (fira-code-mode–make-alist fira-code-mode–ligatures) fira-code-mode–old-prettify-alist)))

(defun fira-code-mode–make-alist (ligatures)

  “Generate prettify-symbols alist from LIGATURES.”

  (let ((idx -1))

    (mapcar (lambda (s)

              (setq idx (1+ idx))

              (let* ((code (+ #Xe100 idx))

                     (width (string-width s))

                     (prefix “”)

                     (suffix ‘(?\s (Br . Br)))

                     (n 1))

                (while (< n width)

                  (setq prefix (append prefix ‘(?\s (Br . Bl))))

                  (setq n (+ n 2)))

                (list code (cons prefix (cons s suffix)))))

            ligatures)))

(defvar fira-code-mode–ligatures

  ‘((“>=>” . “⟹”)

    (“>=” . “≥”)

    (“>>” . “→”)

    (“<<” . “←”)

    (“>>” . “⊃”)

    (“<<” . “⊂”)

    (“>=>” . “⇒”)

    (“<=>” . “⇔”)

    (“<=” . “≤”)

    (“<~” . “∼”)

    (“<~~” . “≃”)

    (“</” . “∖”)

    (“</>” . “∖”)

    (“~@” . “˜”)

    (“~-” . “₋”)

    (“~=” . “≈”)

    (“~>” . “≯”)

    (“~~” . “≁”)

    (“~~>” . “≫”)

    (“%%” . “℅”)

    (“x” . “×”)

    (“:” . “∶”)

    (“+” . “⨢”)

    (“*” . “⋅”)))

(add-hook ‘prog-mode ‘fira-code-mode–enable)

Testing FiraCode in Emacs

To ensure that Fira Code ligatures are working correctly, open a source code file in Emacs and check if the ligatures are displayed as expected. If not, you can troubleshoot the issue by:

  1. Checking font installation: Make sure that the Fira Code font is correctly installed on your system.
  2. Checking Emacs configuration: Ensure that the Emacs configuration is correct, and the Fira Code font is set as the default font.
  3. Checking prettify-symbols: If you are using the prettify-symbols approach, make sure that the prettify-symbols-alist is correctly configured.

Customizing FiraCode in Emacs

Fira Code offers various customization options, such as enabling or disabling specific ligatures and adjusting font settings. You can customize Fira Code in Emacs by:

  1. Adjusting font size: Change the font size of the Fira Code font by modifying the :height parameter in the set-face-attribute function.
  2. Enabling or disabling ligatures: Modify the fira-code-mode–ligatures list to enable or disable specific ligatures.
  3. Adjusting ligature spacing: Customize the spacing between ligatures by adjusting the prefix and suffix variables in the fira-code-mode–make-alist function.

Conclusion

Setting up Fira Code in Emacs and enabling Fira Code ligatures can significantly enhance your coding experience. By following the steps outlined in this article, you know hot to use Fira Code with Emacs and customize your Emacs font settings to suit your preferences. 

With Fira Code ligatures, your code will look more visually appealing and readable, ultimately improving your productivity as a developer.

FAQs

What is Fira Code, and why should I use it in Emacs?

Fira Code is a programming font that supports ligatures, making your code look more visually appealing and readable. By using Fira Code in Emacs, you can enhance your coding experience and improve your productivity as a developer.

How do I install Fira Code on my system?

You can download the Fira Code font files from the official repository and install them on your system. The installation process varies depending on your operating system, but generally involves right-clicking on the .ttf file and selecting “Install” (Windows), double-clicking the .ttf file and then clicking “Install Font” (macOS), or copying the .ttf file to ~/.local/share/fonts/ and running fc-cache -f -v (Linux).

How do I enable Fira Code ligatures in Emacs?

You can enable Fira Code ligatures in Emacs by using the built-in package manager or manual installation. For the built-in package manager, you can install fira-code-mode and add the necessary configuration to your Emacs init file. For manual installation, you can add the necessary code snippets to your Emacs init file to enable Fira Code ligatures.

How do I customize Fira Code ligatures in Emacs?

You can customize Fira Code ligatures in Emacs by modifying the fira-code-mode–ligatures list in your Emacs init file. This list contains the ligatures that are enabled or disabled in Emacs.

How do I adjust the font size of Fira Code in Emacs?

You can adjust the font size of Fira Code in Emacs by modifying the :height parameter in the set-face-attribute function in your Emacs init file.

How do I troubleshoot issues with Fira Code in Emacs?

If you encounter issues with Fira Code in Emacs, you can troubleshoot the issue by checking the font installation, Emacs configuration, and prettify-symbols configuration. Make sure that the Fira Code font is correctly installed on your system, the Emacs configuration is correct, and the prettify-symbols-alist is correctly configured.

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Using Fira Code on CSS-Tricks
Blog

Using Fira Code on CSS-Tricks

Introduction Fira Code is a popular programming font that has gained significant attention in the web development community. It is a free, open-source font that

Fira Code Font Family
Blog

Fira Code Font Family: Complete Guide

Introduction A monospaced font, also known as a fixed-width font, is a type of typeface where each character occupies the same amount of horizontal space.