Fira Code + Highlighted Code in WordPress

I expect to be writing about both LaTeX and Elixir, so I went ahead to setup some code highlighting.

I went with the Prismatic plugin by Jeff Starr, which supports highlighting code with either Prism.js or Highlight.js. I am not familiar enough to have an opinion, so went with Prism. Picked a theme, and it mostly Just Worked™.

Prism has some nifty features, which included line numbers and highlighting selected lines. (Of course, it also supports all of LaTeX, Elixir, Python, and Javascript.)

def decode_roman(sounds) do
  for sound <- sounds, reduce: %{} do
    acc ->
      jp_str = sound["jp"]
      rest = atomize_keys(sound)
      Map.put(acc, jp_str, rest)
  end
  |> Map.new()
end

What was less intuitive was how to change the font. See, the |> symbol is two key-strokes of| and >, that when placed sequentially gets ligated — only in special fonts — into the triangle. I want to use one of these special fonts, specially Fira Code.

This turned out needing a little hack: you can bring Fira Code from Google Fonts, and drop it into the Additional CSS, but this would get overridden by the styles specified by Prism. The solution is to specify the CSS we add as important:

code {
  font-family: "Fira Code", monospace !important;
}

And that’s how it works.¹

1. Or not. Whether ligatures show up depends not only on the font, but also browser support. Ligatures shows up for Safari and Firefox, but not the Chrome family; which is very strange because I know that Chrome does Visual Fonts just fine (which relies heavily on Opentype features). What a mystery. ↩︎