search

expressive-code / expressive-code

A text marking & annotation engine for presenting source code on the web.
https://expressive-code.com/
MIT License
548 stars 25 forks source link

Markdoc support #145

Open Princesseuh opened 8 months ago

Princesseuh commented 8 months ago

Markdoc isn't terribly popular, nonetheless it would be neat to have Markdoc support for this! Especially in Astro, this is one of the few things that doesn't work.

amandaguthrie commented 5 months ago

Astro/Markdoc/Expressive Code is something I was working on this weekend. Although not elegant, I figured it out how to make it work(ish) - at least for the language, code, title, and frame options. I wrote a blog post on how to get it working: https://amandaguthrie.dev/post/astro-markdoc-expressive-code-1/ - the site is using what I outlined in the post.

There were 2 parts between Markdoc, Astro's Markdoc, and Expressive Code that were the main snags.

  1. @markdoc/markdoc's parser truncates the code fence meta information after the language, and that doesn't appear to have any easy hooks to plug into to change that. I patched it and was able to get it working, but not something I want to check each release, so I went another direction with passing the title (and other props) as Markdoc tag attributes.
  2. The attributes/props weren't a direct map between Markdoc and Expressive Code, and there wasn't a great way to map them without creating an intermediary component.
  3. @astrojs/markdoc's component rendering returns the code content in the default slot (as expected for normal HTML rendering). astro-expressive-code'sCode component does a default slot check and errors if there's content there. I had to stop filling the transformer from @astrojs/markdoc and use a from-scratch schema in the Markdoc config. I couldn't find an option to bypass or ignore that check in Expressive Code, so I ended up making an intermediary component because there were multiple reasons to at this point.

I looked at the @astrojs/markdoc plugin, astro-expressive-code plugin, and tried a couple of ways to make them work together like Astro/Prism/Markdoc and Astro/Shiki/Markdoc. I'm about a year into my dev journey and haven't worked with the Vite/Rollup plugin ecosystem enough yet to have the base knowledge to approach this without significant research. If anyone wants to collaborate, I'd love to contribute what I can.

I'm going to test line highlighting and other options and see if it can all be used by creating custom attributes. Will update if I find anything interesting.

If there's any other information I can contribute here, in Astro's repo, or elsewhere, please let me know. Would love to see these three tools working in harmony! ❤️‍🔥

Princesseuh commented 5 months ago

I made myself a component here: https://github.com/Princesseuh/erika.florist/blob/main/src%2Fcomponents%2Fcontent%2FCode.astro