Installation

Add Mdsvex with svelte adder

npx svelte-add@latest mdsvex && npm i --save-dev mdsvex

Configuration

Add custom layouts

Configure layout

const config = {
    extensions: ['.svelte.md', '.md', '.svx'],
    layout: {
        blog: './src/lib/layouts/blog.svelte'
    }
};

export default config;

Design layout

Use <slot/> to show the content of your markdown file

<script>
	export let title = '';
	export let description = '';
	export let author = '';
	export let date = '';
    export let banner = ''
	export let tags = [];
</script>

{title}
<br>
{tags}

<slot />

Markdown example file

---
layout: blog
title: "A first blog post"
description: "Fusce ac lorem sit amet metus vestibulum dapibus ut at mauris. Etiam ut pulvinar nibh."
author: "Sveltekit Blogger"
date: "2021-09-08"
banner: "/images/blogs/a-second-post/banner.jpg"
tags: ["Svelte", "JavaScript", "Typescript", "web development", "Programming"]
---

## Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat, lacus et accumsan lobortis, justo sapien mattis felis, et lacinia ante libero ut augue. Etiam nec odio at erat commodo scelerisque. Phasellus convallis, mauris a tincidunt convallis, leo velit e

```jsx
const snapshot = await db.ref('views').once('value');
const views = snapshot.val();
const allViews = Object.values(views).reduce((total, value) => total + value);

# Style with Tailwindcss

## Install Tailwind css

```bash
npx svelte-add@latest tailwindcss

Install tailwind/typography

pnpm install @tailwindcss/typography

Configure

module.exports = {
  plugins: [
    require("@tailwindcss/typography")
  ]
};