https://github.com/joshnuss/svelte-markdoc

Markdoc preprocessor for Svelte
https://github.com/joshnuss/svelte-markdoc

markdoc svelte

Last synced: 9 days ago
JSON representation

Markdoc preprocessor for Svelte

• Host: GitHub
• URL: https://github.com/joshnuss/svelte-markdoc
• Owner: joshnuss
• Created: 2022-05-12T01:45:29.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-23T18:31:14.000Z (over 2 years ago)
• Last Synced: 2024-10-14T22:20:25.996Z (23 days ago)
• Topics: markdoc, svelte
• Language: JavaScript
• Homepage:
• Size: 29.3 KB
• Stars: 34
• Watchers: 3
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
svelte-markdoc

-----------------

A [Markdoc](https://markdoc.io) preprocessor for [Svelte](https://svelte.dev). Supports [SvelteKit](https://kit.svelte.dev).

## Setup

Create a [SvelteKit](https://kit.svelte.dev) project:

```bash

mkdir my-markdoc-project

cd my-markdoc-project

pnpm init svelte@next 

```

Install the `svelte-markdoc` package:

```bash

pnpm install -D svelte-markdoc

```

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

```javascript

export default {

  variables: {

    title: 'My awesome site'

  }

}

```

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

```javascript

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`:

```markdown

---

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