The original Crayon Syntax Highlighter by Aram Kocharyan no longer available because it does not work with the newer WordPress versions. However, Fedor Urvanov has worked with Aram Kocharyan to make Crayon Syntax Highlighter work again as Urvanov Syntax Highlighter. Most of the core technical blogs (including ours) heavily rely on Urvanov/Crayon Syntax Highlighter because it works with all the features we ever need.
Usually, we need a dark background for the code snippets to resemble the SSH screen. Our choice of fonts, icons and colours are limited for better readability, concentration and availability of Unicode characters. JuliaMono is a monospaced typeface, it is free and open-source. It was originally designed for Julia and officially they suggest use in different text editing environments that require a wide range of technical Unicode characters. It has massive Unicode support. However, there is a strange choice of ligaturing for a core symbol pair in JuliaMono.
Monaco is a great typeface, which is included by default. Usually, Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New etc fonts are used for pre, code blocks.
---
Font licenses are complex. Tend to choose fonts which are officially available on GitHub with a Apache or GNU GPL license compatible license. We are talking about JuliaMono, look at their website and GitHub repo for license:
1 2 | https://juliamono.netlify.app https://github.com/cormullion/juliamono |
SIL Open Font License is considered “free” by the Free Software Foundation (FSF) and the Debian project. Monaco is not a freely licensed font. Apple can sue for distributing it or any modified versions as copyright infringement. The same goes for Menlo. There is a slight legal risk of using Monaco. This is my legal explanation. I am not a lawyer.
How to Use JuliaMono Font in Urvanov/Crayon Syntax Highlighter
Within the Urvanov/Crayon Syntax Highlighter’s plugin directory, you’ll find a directory named fonts. Create a sub-directory with the name juliamono. I guess, you’ll use JuliaMono-Regular font. Check the look from juliamono.netlify.app.
Inside this juliamono directory, you’ll need at least JuliaMono-Regular.woff2 file.
Outside the directory (one level up), you need this CSS file:
1 2 3 4 5 6 7 8 9 10 11 | @font-face { font-family: JuliaMono; src: url("juliamono/JuliaMono-Regular.woff2") format("woff2"); text-rendering: optimizeLegibility; font-weight: normal; font-style: normal; } .crayon-font-juliamono * { font-family: JuliaMono, 'JuliaMono-Regular', 'Courier New', monospace !important; } |
Save this file as juliamono.css.
On SSH, I ran these commands:
1 2 3 4 5 6 | cd wp-content/plugins/urvanov-syntax-highlighter/fonts/ mkdir juliamono && cd juliamono wget https://github.com/cormullion/juliamono/raw/master/webfonts/JuliaMono-Regular.woff2 cd .. nano juliamono.css # paste the content |
After this work, you’ll get JuliaMono in the list of fonts on the plugin’s settings page:
