Improved Code component experience.

[AimForNaN]

What version of starlight are you using?

0.32.1

What is your idea?

Currently, the Code component only takes in code through the code attribute. Instead of having the Code component be inline or a self-closing tag, it should be converted into a block component, using the body of the component as the code in the same way backticks are used.

Why is this feature necessary?

Because an attribute is not the best or most convenient place to write code.

Do you have examples of this feature in other projects?

{% code lang="js" title="example.js" %}
Code goes here.
{% /code %}

<Code lang="js" title="example.js">
Code goes here.
</Code>

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Thanks for the feedback @AimForNaN. What is your use case for this? Wouldn’t you be able to use back ticks if this is what you are aiming for?

```js title="example.js"
Code goes here.
```

[AimForNaN]

Yeah, if there doesn't exist a markdoc plugin system that functions like middleware, I wouldn't shift that burden on you.

[delucis]

I think the ideal fix would be for Markdoc to add support for code block metadata the same way as is available in Markdown. That way we could just support the same behaviour we have in MD/MDX and this would work:

```js title="example.js"
Code goes here.
```

Might be worth checking if someone has raised that as a feature request with them.

[HiDeoo]

Opened a PR adding support for the Markdoc fence attribute syntax which would add partial support for text and line markers.

Not as easy to write imo and cannot provide a 1:1 support but still an improvement:

```js {% title="editor.exe" frame="terminal" meta="{1} 'markers'" %}
console.log('Hello, world!');
```

[AimForNaN]

I'd be perfectly fine with that. I don't think a markdoc user can complain about syntax.

[delucis]

Just released this in @astrojs/starlight-markdoc v0.3.0 — thanks again @HiDeoo!