function Media_guide_md($$renderer) { $$renderer.push(`

${escape_html(title)}

This guide demonstrates every media type you can use in your MDSvex blog, styled with your custom theme.

1. Images

Remote Image with Theme Colors

Themed Image

Local Image (Place in `static/blog-images/`)

Local Image

> Note: The image border radius and shadows automatically apply your theme’s styling.

2. Code Blocks

Your theme colors will automatically apply to code blocks:

${html(`const greeting = 'Hello, Themed Blog!';
console.log(greeting);

// Reactive state with your color palette
let count = $state(0);
function increment() {
	count++;
}`)}

3. Typography

Headings Your theme automatically styles all headings: This is H2 - Uses —text color This is H3 - Also uses —text color This is H4 - Consistent styling Links This is a link - Uses your secondary color Strong and Emphasis Bold text uses —text color and italic text uses —text-soft.

Videos & Media YouTube Embed

Local Video
Callout Boxes

💡 Pro Tip

Your theme automatically handles all the styling!
Horizontal Rule Everything above automatically inherits your theme’s styling through the Typography plugin and global CSS variables. Copy

5. How to Use

Ensure your CSS variables are global - Add them to src/app.css or src/routes/+layout.svelte
Images work automatically - Just place them in static/blog-images/
Dark mode works automatically - Uses prefers-color-scheme
All components are styled - No extra classes needed

Your blog now has perfect SEO, custom theming, media support, and responsive design!

`); }

Your Name