MDX Svelte

MDX for Svelte. Svelte in Markdown. A Markdown preprocessor for Svelte. A Preprocessor for Svelte that allows you to write Svelte code inside Markdown files.

---
title: Hello, World!
---
 
<script>
    import Markdown from "./Markdown.md"
    import Component from "./Component.svelte"
</script>
 
The title of this page is {frontmatter.title}!
 
<Markdown />
<Component />Copy

Hey there! Welcome to MDX Svelte. Ever wished you could sprinkle some Svelte magic into your Markdown files? Well, now you can! With MDX Svelte, writing Svelte code directly in Markdown is a breeze. Whether you're jazzing up docs, crafting tutorials, or spicing up your content, we've got you covered. Say goodbye to boring Markdown and hello to dynamic, interactive content. Ready to level up your Markdown game? Let's dive in!

What is this?

MDX Svelte is an alternative to "mdsvex".

This library exports a function that acts as a preprocessor for Svelte. It transforms Markdown files into HTML, preparing them for further processing by Svelte or other preprocessors.

This library has a built-in transformer that uses "unified" and its ecosystem, to parse and transform Markdown to HTML.

When should I use this?

This library is useful when you want to display markdown content on a web page. And it's also useful when you want to use Svelte code inside Markdown files.

What motivated me to create this?

I developed this project due to the issues and limitations with "mdsvex", which was not receiving updates. Additionally, "mdsvex" is transitioning out of the "unified" ecosystem, which may not be preferred by everyone.

What does it address?

• Built-in "unified" transformer with good defaults.
• Offers the flexibility to create custom transformers.
• Can auto-import files and components into Markdown files.
• Built-in hastFromHtml and isHrefExternal "unified" utilities.
• Eliminates annoying "was created with unknown prop" warnings.
• Allows utilization of the native SvelteKit layouts (+layout.svelte).
• Replace HTML elements with components using tag name or CSS selectors.
• Enables usage of any code highlighting libraries without encountering issues like the need to escape certain characters to prevent conflicts with Svelte syntax.

Limitations

• Only works in SvelteKit projects.
• Prettier can't properly format Svelte code in Markdown files.
• No IntelliSense support.