Syntax highlighting library support for modern frontend frameworks
Tags: webdev, productivity, tooling, watercooler
Published: 2022-06-22 09:57:34

I was going to write a post about Svelte and I was checking if it is a language that is supported by the highlighting library I use ([Rouge](https://github.com/rouge-ruby/rouge)). It is not! 

I guess I could fudge it by using HTML as the language for the code blocks because it is HTML-like. Or add a lexer/extension myself! 🤔

It got me thinking about which modern frontend frameworks are supported by syntax highlighting libraries now. The list of frameworks is growing year by year! When you consider that people use TypeScript with frameworks too, does that mean that they need to have 2 language variants for each framework?

## The libraries

Here is the list of some of the most popular syntax highlighting libraries:

<table class="striped fixed">
<thead>
<tr>
<th>Library</th>
<th>Description</th>
<th>Supports</th>
<th>Request for framework support</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://prismjs.com/">Prismjs</a></td>
<td>Written in JavaScript. Widely used including <a href="https://www.11ty.dev/">Eleventy</a> as a plugin.</td>
<td>React JSX, and React TSX. <br><br>There appears to be a <a href="https://github.com/pngwn/prism-svelte">language extension for Svelte</a> available that has not been integrated with project. <br><br>Here is the <a href="https://prismjs.com/#supported-languages">supported languages list</a>.</td>
<td><a href="https://github.com/PrismJS/prism/issues/1665">Vue (18/12/18)</a>, <a href="https://github.com/PrismJS/prism/issues/2090">Svelte (15/10/19)</a>, and <a href="https://github.com/PrismJS/prism/issues/3336">Marko (12/02/22)</a>.</td>
</tr>
<tr>
<td><a href="https://github.com/alecthomas/chroma">Chroma</a></td>
<td>Written in Go and used by <a href="https://gohugo.io/">Hugo</a>.</td>
<td>Supports React, Vue, and Svelte. <br><br>Here is <a href="https://github.com/alecthomas/chroma#supported-languages">supported languages list</a>.</td>
<td><a href="https://github.com/alecthomas/chroma/issues/523">Angular (13/6/21)</a></td>
</tr>
<tr>
<td><a href="https://github.com/rouge-ruby/rouge">Rouge</a></td>
<td>Written in Ruby and used by <a href="https://jekyllrb.com/">Jekyll</a>.</td>
<td>React JSX, React TSX, and Vue.<br><br><a href="https://github.com/rouge-ruby/rouge/blob/master/docs/Languages.md">Supported languages list.</a></td>
<td><a href="https://github.com/rouge-ruby/rouge/issues/1717">Svelte (23/6/21)</a></td>
</tr>
<tr>
<td><a href="https://highlightjs.org/">highlight.js</a></td>
<td>Written in JavaScript.</td>
<td>React (has <code>jsx</code> alias for JavaScript) and Svelte. Appears to be <a href="https://github.com/highlightjs/highlightjs-vue">support for Vue</a> as a separate package that is not listed.<br><br>Here is the <a href="https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md">supported language list.</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://pygments.org/languages/">Pygments</a></td>
<td>Written in Python. Pygments is a syntax highlighting O.G that inspired some of the others.</td>
<td>Does not support any JavaScript frameworks. Here is the <a href="https://pygments.org/languages/">supported languages list.</a></td>
<td></td>
</tr>
</tbody>
</table>


 This is not a thorough investigation. The docs for language support appear not to be totally up-to-date for some of the libraries too. So, don't take this as gospel.

## Observations

It's interesting that Prismjs and Rouge have 2 variants for React, but the others do not.

I guess Angular is covered by TypeScript as a language?

Chroma is the only one to support 3 of the [most popular frameworks](https://2021.stateofjs.com/en-US/libraries/front-end-frameworks) in React, Vue, and Svelte.

There is no support for newer frameworks like [Marko](https://markojs.com/), which have their own file extension (format).

What do people do on their blogs then if they are frontend dabblers? 😃🧪

I wonder if the [Language Server Protocol (LSP)](https://en.wikipedia.org/wiki/Language_Server_Protocol), which powers some of the features for code editors now, provides a simple way to abstract out the semantic highlighting bit. It seems a shame that the different libraries are all doing the same thing and they do not quite cover the bases.