joshnuss / svelte-markdoc

Markdoc preprocessor for Svelte

svelte-markdoc

A Markdoc preprocessor for Svelte. Supports SvelteKit.

Setup

Create a SvelteKit project:

mkdir my-markdoc-project
cd my-markdoc-project

pnpm init svelte@next 

Install the svelte-markdoc package:

pnpm install -D svelte-markdoc

Create a markdoc.config.js in the root folder to hold your markdoc config:

export default {
  variables: {
    title: 'My awesome site'
  }
}

Then, configure the preprocessor in svelte.config.js:

import preprocessMarkdoc from 'svelte-markdoc'
import markdocConfig from './markdoc.config.js'

const config = {
  extensions: ['.svelte', '.markdoc'],
  preprocess: {
    markup: preprocessMarkdoc(markdocConfig)
  },
  kit: {
    // ...
  }
}

export default config

Now you can create pages with the .markdoc extension in src/routes:

---
title: Hello from Markdoc
---

# {% $markdoc.frontmatter.title %}

This is *super* cool.

FAQ

How is this different than MDX?

MDX is great! It's very flexible, this is a more contrained editing system where docs are treated as data, whereas with mdx, it's more like code. More info here: https://markdoc.io/docs/faq#why-not-mdx

License

MIT

svelte-markdoc's Issues

500 error : Unexpected token

Hi, I just tried this package and I found an error like this

If there is a curly bracket in the .markdoc file it will cause an error. If I change the curly bracket with the bracket it's working fine.

+page.markdoc is not found - SvelteKit

I think svelte-markdoc doesn't work with the latest SvelteKit. Check the setup and error below:

// package.json:

{
  "name": "markdoc-demo",
  "version": "0.0.1",
  "scripts": {
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
     "lint": "prettier --check .",
     "format": "prettier --write ."
   },
  "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@sveltejs/package": "next",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",
     "postcss-load-config": "^4.0.1",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",
     "svelte": "^3.44.0",
     "svelte-preprocess": "^4.10.7",
     "typescript": "^4.8.2",
     "vite": "^3.1.0",
     "svelte-markdoc": "^0.0.1",
   },
  "type": "module",
  "dependencies": {
   }
}

// markdoc.config.js

export default {
  variables: {
     title: 'My awesome site'
   }
};

// svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocessMarkdoc from 'svelte-markdoc';
import markdocConfig from './markdoc.config.js';

const config = {
  extensions: ['.svelte', '.markdoc'],
    kit: {
      adapter: adapter()
    },
      preprocess: {
         markup: preprocessMarkdoc(markdocConfig)
      }
};

export default config;

Routing is:

src
 └ routes
    └ +layout.svelte
    └ +page.svelte
    └ +page.markdoc

The error I get:

Not found: /+page.markdoc
Error: Not found: /+page.markdoc

Wondering what could be causing this.

How would this support custom tags?

I found this repl, with support for custom tags.

Would it be possible to support custom tags in the pre-processor?