libraries for displaying code

[wanton kite]

Is there a library that can display jsx/html code, can't find a normal one

[rotund ocean]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[wanton kite]

libraries for displaying code

[verbal crystal]

https://bright.codehike.org/

https://shiki.matsu.io/

https://github.com/antfu/shikiji

I recommend the first one as its very easy to use and supports RSC

[solar sapphire]

I really like it. Used it to highlight code and it's very pleasant experience

But do you know any way to use Shiki to make an editable highlighter? Like codemirror but autocomplete isn't necessary

Just the highlight of code in a textarea for eg

[tropic idol]

you can try the approach used by shiki's website. it's quite ingenious:

• you make a relatively positioned div.
• you render shiki inside the div
• you render a textarea element with transparent text colour on top of shiki

[solar sapphire]

That sounds like a good approach. I was looking at your website's code right now and it seems like you used the same method

[tropic idol]

i also use that exact same method on my website, so if you want nextjs code for reference it's available: https://github.com/joulev/website/blob/main/src/app/(public)/apps/snippets/editor.tsx

yes exactly

[solar sapphire]

Thanks for the help 🙂

[tropic idol]

keep in mind though that it does add a lot to the bundle size

[solar sapphire]

Well that is totally expected and I guess it's ok because it will be heavy

[tropic idol]

yeah indeed, shiki is designed to be beautiful, not lightweight

[solar sapphire]

Also I don't think if it will impact performance much 🤔

I mean not in a way that the user has to wait for like 10-20 seconds for the editor

[tropic idol]

yeah, it's not disastrously bad. for most users nowadays the perf hit won't even be noticeable

[solar sapphire]

yup

[tropic idol]

but you wont get the little green numbers in the build log lol

it will likely be red but it's ok