Creating <code> blocks with highlighting?

[andrioid]

Hi there. Love the library!

I'm currently using it to create OG images on my blog, and was wondering if it's possible to create "code snippets" from the blog content. For example, if I find a "```ts" block, I'd like to render that in a <code> with some highlighting rules.

My first attempt as a simple <code> tag.

How would you do it?

[andrioid]

I've stumbled upon shiki-image that I completely missed from the project README. I'll try it out.

[kane50613]

shiki-image npm version is using old version of Takumi since the maintainer pi0 doesn't have time to release a new version, use the git version is recommended.

[andrioid]

Yes thanks! I ended up using it for inspiration, while using a more modern version. I check if my blog posts contain mostly markdown code blocks, and if it does; it creates something like this:

Otherwise it falls back on a more traditional og-image.

[kane50613]

That's really cool idea and well designed, and I'm happy that it actually works!