twoslash VS core

Shiki is awesome for code samples. It’s even better paired with a set of light/dark themes designed to be used together (and I really need to get around to open sourcing my solution for swapping inline styles with classes for that use case, it’s great for using Shiki without a client side runtime).

ALSO awesome is Shiki Twoslash[1], for displaying TypeScript editor feedback in code examples.

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

Major change was swapping the code rendering for https://github.com/shikijs/twoslash to get ts type info

Twoslash is a Shiki addon. It’s adding TypeScript compiler hints. Same as we can see in VS Code. You can check which

You may also notice I have some embeds on my articles even though Markdown natively does not support embedding content. This is done by using a Remark plugin. Remark is a tool that can be used to parse and transform Markdown. In this case, I used a plugin called remark-embedder to add custom logic to replace links from specific websites (in this case, Youtube and CodeSandbox) with s containing the actual page; without the plugin, those would simply be text links and would make for a much less pleasing lecture, wouldn't you agree ?
You can obviously do more with remark than just that, so take a look at the plugins they offer. But how do you use with Astro? You simply add the plugins in your astro.config.mjs file (documentation on how to do that is here).

This post was a bit chaotic, but I hope I was able to share a bit of what I did on my blog section (where you are hopefully reading this right now).