It uses C# Compiler SDK (Roslyn) that allows to generate "something" even if the input is a mess
and then I use some heuristics to identify for example classes better, e.g by having popular classes names/substrings list and checking whether it is there - like Console, Controller, Service, DTO, Handler etc.
Of course it cannot be perfect because it has no access to the whole code, it uses just some fragment that may not even compile / be completed
but I think that you can achieve something reasonable and at worst you'll be able to tweak it manually.
The goal was bo be able to easily put C# code with VS/VSC colours on a web page and without having to use generic js colouring libs, so we can get something closer to real IDE
You can easily modify generated a few lines of CSS and have your own colours
I was also gonna mention Shiki. While it is JS, you can SSR/SSG, and:
- it uses VSCode grammars and themes, which is awesome.
- it’s got some really cool extensions like Shiki Twoslash[1], allowing VSCode-like type hovers and type error demos. I’ve heard this can work without client-side JS but haven’t had the opportunity to check that out just yet.
- with some effort, you can extract the inline styles to a stylesheet and support pure CSS dark mode (note to self: clean up and open source my implementation of this).
When I saw "Pure CSS/HTML" I figured it was doing the highlighting in CSS. IIUC this is doing the highlighting in C# and generating an HTML page. Which wile useful is not novel, it is how probably most syntax highlights work like Pygments or Rouge.
This is similar in aim to FSharp.Formatting[1], which has been used for a while to generate syntax highlighting and hover tooltips for code samples and API docs in the F# ecosystem. Very cool to see!
16 comments
[ 3.0 ms ] story [ 30.2 ms ] threadand then I use some heuristics to identify for example classes better, e.g by having popular classes names/substrings list and checking whether it is there - like Console, Controller, Service, DTO, Handler etc.
Of course it cannot be perfect because it has no access to the whole code, it uses just some fragment that may not even compile / be completed
but I think that you can achieve something reasonable and at worst you'll be able to tweak it manually.
The goal was bo be able to easily put C# code with VS/VSC colours on a web page and without having to use generic js colouring libs, so we can get something closer to real IDE
You can easily modify generated a few lines of CSS and have your own colours
JS libs like Highlight.js and Prisma.js can be ran server side and then you send the HTML/CSS like normal.
Generally you'd want to pre-render blogs so syntax highlighting should be compiled HTML/CSS during the build process.
CF workers and other edge computing work great if you have dynamic content if you don't want the client to use JS.
For non-readonly, Monaco and Codemirror are available but heavier ofc.
Anyone else know of another perf syntax highlighting lib? I like collecting tech.
- VSCode theme support
- Textmate grammar tokenizing
- Multiple targets (SVG/PDF)
- Annotations
- it uses VSCode grammars and themes, which is awesome.
- it’s got some really cool extensions like Shiki Twoslash[1], allowing VSCode-like type hovers and type error demos. I’ve heard this can work without client-side JS but haven’t had the opportunity to check that out just yet.
- with some effort, you can extract the inline styles to a stylesheet and support pure CSS dark mode (note to self: clean up and open source my implementation of this).
1: https://shikijs.github.io/twoslash/
Please do!
edit: it submits a form, then reloads to a page with the code highlighted?
but the result is just css/html that you can copy/paste anywhere and you'll have the code with syntax colouring without js required
if I didn't have some troubles with newlines then there'd be form for javascript disabled users today too
[1]: https://github.com/fsprojects/FSharp.Formatting
I've been writing from the perspective where you just generate the html/css and e.g put it on your site, so your users don't need to have js enabled