Quick steps to add MdSvex to Sapper

README.md

Markdown ⬇️ with Sapper 🔥 Setup

This is a short post on how to setup a sapper project with markdown. Markdown is a great way to write posts and documentation. Sapper gives you a SSR or SSG svelte app out of the box. This post documents the process to setup a sapper project with markdown support. Specifically Mdsvex, which allows you to not only write markdown, but to use svelte within your markdown, giving you the best of both worlds. Yay!

Checkout Mdsvex - https://mdsvex.pngwn.io/

💙💙💙💙 I love markdown!!!

💙💙💙💙 I love svelte!!!

Getting started

The first thing you do is create a sapper project

npx degit sveltejs/sapper-template#rollup my_project
cd my_project

Next we need to initialize the project and install mdsvex

yarn
yarn add -D mdsvex

In order to configure sapper to compile markdown files we need to modify the package.json and the rollup.config.js files

In the package.json scripts section we need to tell the sapper cli to look for .svx files

"scripts": {
  "dev": "sapper dev --ext '.svelte .svx'",
  "build": "sapper build --legacy --ext '.svelte .svx'",
  "export": "sapper export --legacy --ext '.svelte .svx'"
}

In the rollup.config.js file we need to import mdsvex and add it as a svelte preprocessor and modify the svelte extensions for both the client and server nodes of the rollup config.

import { mdsvex } from 'mdsvex'

...

const extensions = ['.svelte', '.svx']

...

client: {
  ...
  plugins: [
    svelte({
      extensions,
      preprocess: mdsvex()
      ...
    }),
    ...
  ]
},
server: {
  ...
  plugins: [
    svelte({
      extensions,
      preprocess: mdsvex()
      ...
    })
  ]
 }

🎉🎉🎉 Thats it! 🎉🎉🎉

Now create a svx file in the routes folder and it should render:

hello.svx

# Hello From Mdsvex

yarn dev

open http://localhost:3000/hello