Feature: custom frames
tmcw opened this issue · comments
Hi! We're happily using expressive-code in our docs. It's awesome, and makes everything look high-polish (even if we've got a ton of writing and copyediting to do 😆 )
For chunks of code, we're generally giving examples for the platform, and it'd be great to add a button to each code example that says like "Open in Val Town". I could imagine the same for other scenarios - open in CodePen, open in CodeSandbox, etc. Or even code with a built-in REPL.
It's be awesome if there was a way to provide a custom frame - like by providing our own method that returns HAST like this does internally for frames. I know that right now frame names are validated so that might make the 'check' step harder, though. But anyway - if this is potentially in scope it'd be awesome, and if you have an idea for how it could be implemented cleanly, we could help with a PR!
Hello and welcome!
Modifying the HAST of the code blocks at any stage is already possible with Expressive Code. In fact, this was one of the key design principles when developing this package with its plugin architecture. I'm just writing its documentation in Starlight and your request is a great proof that I need to include plugin development examples. :)
Here's a quick StackBlitz example on how you can add custom buttons by writing a small plugin:
You can find my existing documentation on how to write plugins (including all the available hooks and data) here: https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/core/README.md#writing-your-own-plugins
Hope that helps! Please let me know if you run into any issues.
As I see in your linked repo that you're happily using the plugin approach and have already customized the buttons to make them yours, I'm closing this issue here on my end now. :)
Happy coding!