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 }
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?
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:
I give a custom layout to the mdsvex parser where I substitute certain html tags for custom components. So
h2
,h3
andp
tags gets transformed in custom Svelte components.I do this via a layout file:
And pass this file to the mdsvex config:
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?