Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Monokai opened this issue May 12, 2024 · 1 comment

Comments

@Monokai
Copy link

Monokai commented May 12, 2024

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
Copy link

dxlbnl commented Oct 21, 2024

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Triage + Refine
Development

No branches or pull requests

2 participants