This is such a good video. I tried using Shiki 2 weeks ago but I was unfamiliar with it and couldn't really figure out how I could utilize it to its fullest potential, and this video literally gave me everything I needed. Thank you.
In my experience, loading shiki is relatively slow (even with the fine-grained bundle), so I ended up writing an independent watch script that highlights particular files and then saves a map of all highlighted code within a $lib/ script. Great solution if you don't need to highlight anything on-the-fly
@@julienblanchon6082 a more generalized version of that script would take a list of files/directories to watch, use the filenames as the map keys, and then let the app sort out which highlights go where
the PR for Shiki Magic Move Svelte renderer was accepted :D And tbh, it's one of the very few highlighter that actually supports svelte! so yeah. Much love
I am not understanding how to do custom css. Has anyone a guide or some examples where I can see how to achieve this? I can only modify the syle from the transformers but when i try css i really don't know how to do it
This is such a good video. I tried using Shiki 2 weeks ago but I was unfamiliar with it and couldn't really figure out how I could utilize it to its fullest potential, and this video literally gave me everything I needed. Thank you.
Very nice! I think I will adopt this in my personal website I'm working-- because I'll be sharing code.
this is going to be a very awesome and handy tool for educational content
In my experience, loading shiki is relatively slow (even with the fine-grained bundle), so I ended up writing an independent watch script that highlights particular files and then saves a map of all highlighted code within a $lib/ script. Great solution if you don't need to highlight anything on-the-fly
smart
Wow wonderfull idea, is the code public ?
@@julienblanchon6082 a more generalized version of that script would take a list of files/directories to watch, use the filenames as the map keys, and then let the app sort out which highlights go where
@@julienblanchon6082 my first comment might have gotten filtered by youtube. it's buried in my Projectrix repo on my github
@@julienblanchon6082 yes, but youtube censors comments with links
the PR for Shiki Magic Move Svelte renderer was accepted :D
And tbh, it's one of the very few highlighter that actually supports svelte! so yeah. Much love
Nice timing. I just heard about shiki earlier today when looking at carta
Nice video, thanks. Gonna get back to svelte soon and your videos really help (also the non-svelte ones, e.g. this, css, ...).
It finally has its website.
It was okay before but with merging from Shikiji, it became much more awesome.
I am not understanding how to do custom css. Has anyone a guide or some examples where I can see how to achieve this? I can only modify the syle from the transformers but when i try css i really don't know how to do it
very cheeky
wait, why is your cursor different? Is it Linux?
maybe it's maybelline
Do you have any examples of using this with animotion?
I'm working on a Shiki code block component for Animotion
The cli should be enough, no one would ever go down even the twoslash package, quite overkill.
speak for yourself
depends on use case. I can definitely see many use cases for twoslash