I think people who dabble in coding and share their code on the Internet has worked with one of the many web syntax highlighing systems such Prism, Pygments, GeSHi, highlight.js, Chroma, and others. There’s even a syntax highlighting font! I’ve used all these systems except the colorized font, and even made my own highlighting for languanges they don’t support; mainly for IBM languages I programmed in professionally. Code highlighting has become a default feature in today’s text editors. Indeed, the color differentialtion, even subconsciously, can help find typos or things that don’t “look right.”
On the web, syntax highlighting is divided into server-side and client-side processing. Server-side is when the web page is assembled by the server and all of the colorization is done at the server. No special downloads are needed in the visitor’s web browser. Client-side sends information about colorization such as “this is a keyword” or “this is a number,” and a small program is downloaded with the web page the perform the colorization using the visitor’s web browser. (A small JavaScript program and CSS styling file are downloaded to the client.) Both of these have their own pros and cons; again, I’ve used both server- and client-side colorization. I’ve found it’s generally easier to do server-side when using web page software that creates static pages, such as Hugo or Octopress. When using a live content management system like WordPress or Textpattern, it’s usually easier to use Prism or Highlight on the client. Again just my own experience.
In December, 2024, while slowly putting this site (the-pythia.net) back online, the current site theme Minimum uses the now-defunct Google Prettify highlight system, which is client-side.
I’ve been thinking about the effort of highlighting. Part of the decision is which one to use: Prism, Pygments, Prettify? Can they run server-side? That is somewhat of a trick question because it can depnd on which website or blogging engine used. Since I really wanted to get back into Textpattern, I would stand on the shoulders who solved the problems before me. For server-side with Textpattern, the ones I found were using GeSHi with the fox_code Textpattern plugin, and Pygments with the jea_pygments_txp plugin.
With user etc’s help, I was able to get <fox_code>
running with the GeSHi highlighting. I hadn’t used GeSHi before, but it seemed to work pretty well.
Along with fox_code
, the jea_pygments_txp
plugin for Textpattern also needed some help working with PHP version 8. While Textpattern works with PHP version 5.5 as of this post, PHP 8 offers performance and security enhancements. However, the additional requirements to getting Pygments working server-side, installing Python and Pygments, were more than I wanted for a simple website. One items that intrigues me about Pygments is one of its themes, bw
which is a black-text-only theme. “Highlighting” is done by bolding or italicizing elements in the code. This is not unique to Pygments, of course, but it stands out in a sea of Crayola-color highlighting. As I write this, it comes to mind that the limited nature of that bw
theme could fit well with the relatively limited scope of GeSHi elements I already have working in Textpattern.
Offscreen: I implemented a quick-and-dirty bw
style for GeSHi. It is passable for me given the differences with how the GeSHi and Pygments parsers work. It fits well with the philosophy of the Minimum
theme currently in use: focus on writing. The code samples now look how they might have been done in a newspaper.
Later, in January, I decided to remove GeSHi and go back to the tried-and-true Prism. This also aligns with future TextPattern development, such I think is coming with Prism out of the box. Or possibly for the admin-side only for post previewing. I’ve seen it mentioned in the forums but haven’t paid much attention to it. Also ported the bw
theme from Pygments to Prism.
Onscreen: In keeping with the monochromatic nature of The Pythia, a new code font was needed. Every developer has their own opinion on their code font, from classics like Consolas or Menlo to newer ones like Fira Mono or Apple’s SF Mono (for Mac developers only, wink!). I’ve been partial to JetBrains Mono and IBM Plex Mono. But a new font came around in 2023: Github’s Monaspace. Cool features about this font set include:
- Five interchangeable fonts meaning that each style can be used inline with the other four styles and work together.
- “Texture healing” to let wide letters like
m
andw
take a little more space while preserving a constant letter spacing. - Lots of coding ligatures, a natrual for any programming-oriented font. With so many languages on Github this is almost a necessity for adoption.
Named after the noble gases, Monaspace’s five fonts are Neon, Argon, Xenon, Radon, and Krypton. Maintaining the theme for this site, I elected to use Neon, a sans-serif font that works with Adobe’s Hypatia.