Nicer way to pass longer text data to custom component props

[bartolomej]

Is your feature request related to a problem? Please describe. I'm playing around with using sli.dev for teaching web development. I love that I can display nicely highlighted code, but now I'm thinking it would be usefull if there was some nice way to display the render result of html code too (similar to how browser sandbox envirnoments like codepen do it).

I know that I can just create my own component (e.g. CodePreview.vue) and use it for displaying both the Monaco.vue code editor + custom render preview component, but the issue is that I can't define a nice way to provide code input. This is how it's currently possible to provide props to custom components:

<!-- ./components/CodePreview.vue -->
<CodePreview code="<h1>Hello</h1>" />

Ideally I would want to provide code right from the markdown itself, something like that (note the custom "preview" flag):

```html {preview} <h1>Hello</h1> ```

Describe the solution you'd like I would like to have some nice way to provide a longer text input to custom components. But I don't know if that use case will be common enough.

Describe alternatives you've considered Alternative is to just pass the inputs via component props, like it's done now:

<!-- ./components/CodePreview.vue -->
<CodePreview code="<h1>Hello</h1>" />

[tonai]

I agree that in some cases it can be useful to be able to display large blocks of code without having the markdown parser to parse it. But in fact this is not really a slidev issue but more something related to markdown-it, the library that is used to parse the markdown.

Maybe you can create a plugin for markdown-it that will transform the code block as you want (or rather not transform it at all). You can then customize the mardown-it lib by creating a vite.config.ts file: Check https://sli.dev/custom/config-vite.html#configure-internal-plugins

[tonai]

I was curious how to do that, so I tried to create a package myself: https://github.com/Smile-SA/markdown-it-ignore

You should be able to use it like this:

:::
<CodePreview>
  <h1>Hello</h1>
</CodePreview>
:::

And maybe also:

<CodePreview>

:::
<h1>Hello</h1>
:::

</CodePreview>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.