3 ms·

Syntax highlighting on the web

50 points by joelg 4y ago

ewlkjlergerg 4y ago
[flagged]
asdflkjt23w 4y ago
eyelidlessness 4y ago
This is a good reminder that I need to extract and open source the Shiki integration stuff from my personal site. I doubt I fully addressed the limitations in the linked issue, as my usage is fully static (both build and runtime), but there are other parts people might find useful: mapping inline styles to unique generated class names for more generalized styling (currently depends on Fela for atomic classes, but can be generalized further), which also enables support for light/dark mode without JS. Shiki is fantastic, but unfortunately still fairly obscure. Hopefully making it easier to adopt for more use cases will help. I also agree that tree-sitter is a pain to use in web projects, but I’ll be open sourcing my solutions for that too (either as direct contributions to web-tree-sitter where appropriate, or as plugins for ecosystem tooling where I had to do additional work to support specific tools) as it’s part of ongoing, already open source project work.
nyanpasu64 4y ago
Out of curiosity, since this post discusses syntax highlighting on the web and supports code syntax highlighting, what blog engine does this site use? Does it support giving headings their own id (I use headings and like being able to refer to them with anchor URLs, but I didn't see any headings on the entire blog)?
ezekg 4y ago
I use Torchlight (https://torchlight.dev https://torchlight.dev) for syntax highlighting on a static site (https://keygen.sh https://keygen.sh) and it’s been great. I use Torchlight’s CLI to precompile the code snippets during the build step. Much better than highlighting client-side with JS.
mklein994 4y ago
Seems similar to twoslash: https://shikijs.github.io/twoslash/ https://shikijs.github.io/twoslash/ https://github.com/shikijs/twoslash https://github.com/shikijs/twoslash
alpaca128 4y ago
> Also it's written in Rust The core library is in C.

50 points by joelg 4y ago

ewlkjlergerg 4y ago

[flagged]

asdflkjt23w 4y ago

eyelidlessness 4y ago

This is a good reminder that I need to extract and open source the Shiki integration stuff from my personal site. I doubt I fully addressed the limitations in the linked issue, as my usage is fully static (both build and runtime), but there are other parts people might find useful: mapping inline styles to unique generated class names for more generalized styling (currently depends on Fela for atomic classes, but can be generalized further), which also enables support for light/dark mode without JS. Shiki is fantastic, but unfortunately still fairly obscure. Hopefully making it easier to adopt for more use cases will help. I also agree that tree-sitter is a pain to use in web projects, but I’ll be open sourcing my solutions for that too (either as direct contributions to web-tree-sitter where appropriate, or as plugins for ecosystem tooling where I had to do additional work to support specific tools) as it’s part of ongoing, already open source project work.

nyanpasu64 4y ago

Out of curiosity, since this post discusses syntax highlighting on the web and supports code syntax highlighting, what blog engine does this site use? Does it support giving headings their own id (I use headings and like being able to refer to them with anchor URLs, but I didn't see any headings on the entire blog)?

ezekg 4y ago

I use Torchlight (https://torchlight.dev https://torchlight.dev) for syntax highlighting on a static site (https://keygen.sh https://keygen.sh) and it’s been great. I use Torchlight’s CLI to precompile the code snippets during the build step. Much better than highlighting client-side with JS.

mklein994 4y ago

Seems similar to twoslash: https://shikijs.github.io/twoslash/ https://shikijs.github.io/twoslash/ https://github.com/shikijs/twoslash https://github.com/shikijs/twoslash

alpaca128 4y ago

> Also it's written in Rust The core library is in C.