Show HN: Pure CSS/HTML C# syntax highlighting without JavaScript | Hacker News Reader

Show HN: Pure CSS/HTML C# syntax highlighting without JavaScript

csharp-colors.xyz

53 pointsretpoline15 comments

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.

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

See also: Chroma (https://github.com/alecthomas/chroma) based on Pygments (https://pygments.org).

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.

See also: Shiki https://shiki.matsu.io/

Ooo nice one. Cool features I noticed:

- VSCode theme support

- Textmate grammar tokenizing

- Multiple targets (SVG/PDF)

- Annotations

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).

1: https://shikijs.github.io/twoslash/

> (note to self: clean up and open source my implementation of this)

Please do!

I’ll try to get that out this weekend, now that I know there’s interest!

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!

[1]: https://github.com/fsprojects/FSharp.Formatting

Oh that has on-hover tips, that's really cool

You mean this page doesn't run javascript when you click the button? How is this possible?

edit: it submits a form, then reloads to a page with the code highlighted?

no no, unfortunely demo page still uses a few lines of js just to send request and display it (inserts that html/css into the page)

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

It could also post to an iframe

Weird title for what it actually is/does.

Sorry, I wondered how to express this correctly and I guess I failed

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

Reply on news.ycombinator.com