Using Rehype Pretty Code in Astro JS MDX
Context or Problem
I know Astro have support shiki and prism, the official docs integration was so easy. But the problem is I don’t understand how to add custom title or maybe copy to clipboard button or something like that.
Experiment
I tried shiki at first since I already have enough experienc using it on my previous blog site, at first I search for possibility to do that like how to supply custom HTML and CSS to the shiki generated codeblock at that time I didn’t fin any way to solve it.
So then I manually search for it and found a blog from sat0shi.dev telling about rehype-pretty-code which is what I want. Then I learn about it a bit, the stupid problem I found is the my CSS skills not meet the use of something like span[data-bla-bla] {:css} so I need to learn it a bit haha finally I can make it work and thanks to sat0shi I steal some codes from him
Outcome
I personally love beautiful dracula VScode theme, so I use it and for the codeblock title I also use the kinda same like in VScode tab, and similar to the Astro docs too it was so cool for me, but I didn’t add copy to clipboard feature it just blocking my progress right now
Possible Next steps
Implement a function or feature to add a copy to clipboard function for the code blocks.