Markdown render

[Yubo-Cao]

Whenever I am writing html elements in my slides, e.g., <div> for the purpose of creating material design like card, I have to writing all the markdown to their equivalent representation of html.

I would like to see that Slidev provide a component which would render all the markdown text inside their child components.

[tonai]

This should works fine. But maybe it requires additional page breaks after <div> and before </div> :

<div>

**this a strong text**

</div>

This should also work I think:

<div>**this a strong text**</div>

[Yubo-Cao]

This trick only works with <slot />. It does not seem to work with any interpolation syntax from Vue. The following are minimal work example to show that:

// Card.vue
<template>
    <div class="flex justify-center m-2">
        <div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
            <div class="text-gray-900 text-xl leading-tight font-medium mb-2">
            
            {{ title }}
            
            </div>
            <span class="text-gray-700 text-base mb-4">
                <slot /> // slidev do markdown render, if I put white space before and after
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: "Card",
    props: {
        title: String,
        img: {
            type: String,
            default: ""
        }
    }
}
// slides.md
<Card title="don't **work**">

**work**

</Card>
</script>

[tonai]

I agree that it only works with slots. Attributes won't get parsed as markdown because most the time you don't want them to be parsed. This issue is more related on how you want the markdown to be parsed rather than to slidev itself. Slidev use markdown-it to parse the markdown, and the plugin can be configured by creating a vite.config.ts file: Check https://sli.dev/custom/config-vite.html#configure-internal-plugins Maybe you can create a plugin for markdown-it that will transform the markdown as you want.

[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.