This content originally appeared on DEV Community and was authored by Rob O'Leary
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). 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:
| Library | Description | Supports | Request for framework support |
|---|---|---|---|
| Prismjs | Written in JavaScript. Widely used including Eleventy as a plugin. | React JSX, and React TSX. There appears to be a language extension for Svelte available that has not been integrated with project. Here is the supported languages list. |
Vue (18/12/18), Svelte (15/10/19), and Marko (12/02/22). |
| Chroma | Written in Go and used by Hugo. | Supports React, Vue, and Svelte. Here is supported languages list. |
Angular (13/6/21) |
| Rouge | Written in Ruby and used by Jekyll. | React JSX, React TSX, and Vue. Supported languages list. |
Svelte (23/6/21) |
| highlight.js | Written in JavaScript. | React (has jsx alias for JavaScript) and Svelte. Appears to be support for Vue as a separate package that is not listed.Here is the supported language list. |
|
| Pygments | Written in Python. Pygments is a syntax highlighting O.G that inspired some of the others. | Does not support any JavaScript frameworks. Here is the supported languages list. |
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 in React, Vue, and Svelte.
There is no support for newer frameworks like Marko, 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), 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.
What is your experience?
This content originally appeared on DEV Community and was authored by Rob O'Leary
Rob O'Leary | Sciencx (2022-06-22T09:57:34+00:00) Syntax highlighting library support for modern frontend frameworks. Retrieved from https://www.scien.cx/2022/06/22/syntax-highlighting-library-support-for-modern-frontend-frameworks/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.