withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.48k stars 2.46k forks source link

Markdoc shiki code does not render inside an `if` tag #11656

Open taktran opened 2 months ago

taktran commented 2 months ago

Astro Info

Astro                    v4.13.2
Node                     v18.20.3
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/markdoc

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Using shiki code highlighting inside a markdoc if tag results in nothing being rendered (including other content inside the if tag).

What's the expected result?

In this .mdoc file:

{% if equals("true", "true") %}
Inside truthy

```js
const hello = "yes";

{% /if %}



I expect to see `Inside truthy` and the code block rendered using shiki highlighting, however all the contents inside the `if` are not shown at all: https://stackblitz.com/edit/github-jw5bfh?file=src%2Fcontent%2Fdocs%2Fintro.mdoc

I've replicated this with `shiki` commented out: https://stackblitz.com/edit/github-jw5bfh-xsgvdw?file=src%2Fcontent%2Fdocs%2Fintro.mdoc,markdoc.config.mjs - here the text and code are shown.

### Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-jw5bfh?file=src%2Fcontent%2Fdocs%2Fintro.mdoc

### Participation

- [X] I am willing to submit a pull request for this issue.
taktran commented 2 months ago

I copied over the Astro Shiki extension and console logged the results when parsing a .mdoc file, and it seems like the extension is returning the correct output, so I'm thinking it's the Astro/Markdoc wrapping around it.

.mdoc

{% if isFramework("react") %}
react code
```js
const js = "hello";

{% /if %}


Inside the shiki extension

console.log({ lang, content: attributes.content, html, unescaped: unescapeHTML(html), });


Console

{ lang: 'js', content: 'const js = "hello";\n', html: '

const js = "hello";\n' +
'
', unescaped: [String (HTMLString): '
const js = "hello";\n' +
'
'] }