The <Markdown> component's unwrap does not seem to work for blocks of code.

[DemoMacro]

Environment

Nuxt project info: 02:05:44

---

• Operating System: Windows_NT
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.4
• Package Manager: [email protected]
• Builder: vite
• User Config: ssr, typescript, css, modules, build
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

---

Reproduction

// content/example.md
::example-card
```html
<button>Button</button>
```
::

// components/content/ExampleCard.vue
<template>
  <div>
    <slot />
    <Markdown unwrap="pre code" />
  </div>
</template>

Describe the bug

I'm trying to use the <Markdown> component to unwrap the pre and code tags of a code block, but this is not working, is there something wrong with the way I'm using it?

Additional context

No response

Logs

No response

[farnabaz]

Why do you want to unwrap the code? You can achieve your goal without code and unwrap

// content/example.md
::example-card

<button>Button</button>

::

[DemoMacro]

For the example documentation it might be easier to switch between the use case and the use case code by using the unwrap component, putting the code section directly outside the code block means repeating it all over again.

And this may involve another problem, if I use custom elements in the mdc file, even if I have configured it in nuxt.config.ts as follows.

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag: string | string[]) => tag.includes("-"),
    },
  },
});

The console will still report an error as follows.

[Vue warn]: Failed to resolve component: CustomElement
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

So I think it makes perfect sense to be able to apply unwrap to blocks of code. @farnabaz

[farnabaz]

Code blocks are not designed for rendering, even if unwrap work on them you will get a simple string rendered on the page.

If you want to create source/preview tabs, the best way is to duplicate the content. This is how you can create source/preview tabs using Docus:

::code-group

  \```markdown [Markdown]
  Just a paragraph.
  \```

  \```html [Output]
  <p>Just a paragraph.</p>
  \```

  ::code-block{label="Preview"}
  Just a paragraph.
  ::
::

[DemoMacro]

The docus is really good, but I'd still like to be able to configure it at will, plus I think it makes sense to use unwrap in these places anyway.

[farnabaz]

As I mentioned before, unwrapping code blocks will return a list of tokens wrapped inside highlight spans.

If I get your point right, What you want is to make a preview out of code blocks, which is not possible with unwrapping.

[DemoMacro]

As I mentioned before, unwrapping code blocks will return a list of tokens wrapped inside highlight spans.

If I get your point right, What you want is to make a preview out of code blocks, which is not possible with unwrapping.

I thought of another way to do this, by setting the tags for pre and code as custom elements.

[farnabaz]

I quite don't get your point and do not understand how you want to render the source code without the Vue compiler.

But you can try to use <Markdown unwrap="p code pre code" /> to unwrap code and pre tags.

[DemoMacro]

I quite don't get your point and do not understand how you want to render the source code without the Vue compiler.

But you can try to use <Markdown unwrap="p code pre code" /> to unwrap code and pre tags.

I think you were right at the beginning, it's really not a good method to apply to a documentation site. Also, does @nuxt/content support or will it support in the future something similar to import code blocks in vuepress?

[ManasMadrecha]

@DemoMacro Check this https://github.com/unlight/remark-sources