pngwn / MDsveX

A markdown preprocessor for Svelte.
https://mdsvex.pngwn.io
MIT License
2.42k stars 102 forks source link

Best practice for wrapping markdown in custom components with their own sub layout #601

Open Monokai opened 5 months ago

Monokai commented 5 months ago

I'm looking for some points on how to wrap markdown in custom components so that they have their own layout and substitution rules. An example of an mdsvex file:

---
title: Header 1
layout: project
---
<script>
  import CustomComponent from '@components/CustomComponent.svelte';
</script>

## Header 2

A first paragraph with text

<CustomComponent>
### Header 3

A second paragraph with text
</CustomComponent>

I give a custom layout to the mdsvex parser where I substitute certain html tags for custom components. So h2, h3 and p tags gets transformed in custom Svelte components.

I do this via a layout file:

import h2 from '@components/h2.svelte';
import h3 from '@components/h3.svelte';
import p from '@components/p.svelte';

export { h2, h3, p }

And pass this file to the mdsvex config:

mdsvex({
  extensions: ['.svx', '.mdx', '.md'],
  layout: {
    'project': 'src/routes/project/+layout.svelte',
  },
})

How can I substitute the second paragraph with another Svelte component than the first paragraph?

Or maybe more generally: how do I organize my markdown so that certain pieces of markdown text are wrapped in a custom component with different substitution rules than their parent layout?

dxlbnl commented 1 week ago

Instead what might be cool is that instead the slotted content for some components be parsed as markdown.

This would allow the use of markdown outside of .md files, (in specific components)