Markdoc support #394

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's Code 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! ❤️‍🔥

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

thanks a lot @Princesseuh @amandaguthrie !! it works but official support would be awesome

I overrid the fence node in markdoc:

export default defineMarkdocConfig({
  nodes: {
    fence: {
      attributes: { ...nodes.fence.attributes, title: { type: String, render: "title" } },
      render: component("./src/components/Code.astro"),
    },

+astro-expressive-code did the job

@jasikpark can you also share the Code.astro component ?

lol i forgot it's @Princesseuh's perfect Code component 💖

@jasikpark so when you add a code block you are passing title like : {% title="test.py" %} ?

oooh nope, never figured that part out.

@jasikpark found a hacky way, is this even acceptable 😆 check the first line of the code block in the mdoc below, it is splitting at | and parsing all the parts required

Code.astro :

---
import { Code } from 'astro-expressive-code/components'

const { content } = Astro.props
const inputString = Astro.props['data-language'] || 'txt'
const parts = inputString.split('|')
const parsedResult = parts.map((part) => {
  if (part.startsWith('[') && part.endsWith(']')) {
    return part.slice(1, -1).split(',')
  } else if (part.startsWith('{') && part.endsWith('}')) {
    const content = part.slice(1, -1)
    if (content.includes(',')) {
      return content.split(',').map((item) => Number(item))
    } else {
      return Number(content)
    }
  } else {
    return part
  }
})

const [lang, title, mark, ins, del] = parsedResult
---

<Code
  code={content}
  title={title ?? undefined}
  mark={mark ?? undefined}
  del={del ?? undefined}
  ins={ins ?? undefined}
  frame="auto"
  lang={lang ?? undefined}
/>

markdoc.config.mjs :

fence: {
      render: component('./src/components/Code.astro'),
      attributes: {
        ...nodes.fence.attributes,
        content: { type: String },
      },
    },

test.mdoc :

```cpp|test.cpp|{2,4}|{6}|{7}
void DelayedExecutor::delayedExecute(const QString &udi) {
Solid::Device device(udi);
QString exec = m_service.exec();
MacroExpander mx(device);
mx.expandMacros(exec);
KRun::runCommand(exec, QString(), m_service.icon(), 0);
deleteLater(); }```

Demo :

@amandaguthrie maybe you can improve this even further ?

Hello! We are moving feature requests and support questions to discussions and using issues only for bugs to help better track those going forward. See you in the Discussions tab!