Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/colliercz/markdoc-svelte
A Svelte preprocessor for Markdoc
https://github.com/colliercz/markdoc-svelte
markdoc markdown preprocessor svelte
Last synced: about 2 months ago
JSON representation
A Svelte preprocessor for Markdoc
- Host: GitHub
- URL: https://github.com/colliercz/markdoc-svelte
- Owner: CollierCZ
- License: mit
- Created: 2022-05-19T04:59:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-04T20:47:32.000Z (about 2 years ago)
- Last Synced: 2024-11-08T20:08:52.842Z (3 months ago)
- Topics: markdoc, markdown, preprocessor, svelte
- Language: TypeScript
- Homepage:
- Size: 424 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# markdoc-svelte
Preprocess [Markdoc](https://markdoc.io/) files for use in Svelte Kit sites.
## Use
Add the `.md` extension and the `markdoc` preprocessor to your Svelte Kit configuration:
```javascript
import { markdoc } from "markdoc-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: [".svelte", ".md"],
preprocess: [markdoc()],
};
```
## Frontmatter
Frontmatter added as YAML is automatically parsed.
So you could add frontmatter like the following:
```markdown
---
title: A great page
---
With great content
```
You can then access it in your layouts:
```javascript
export let title = ''
{title}
```
And in your content:
```markdown
---
title: Using the Next.js plugin
description: Integrate Markdoc into your Next.js app
---
# {% $frontmatter.title %}
```
## Options
You can choose to customize how the Markdoc file is processed.
### Extensions
By default, files ending in `.md` are preprocessed.
To use other extensions, add them to the `extensions` array in the options:
```javascript
import { markdoc } from "markdoc-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: [".svelte", ".markdoc", ".md"],
preprocess: [
markdoc({
extensions: [".markdoc", ".md"],
}),
],
};
```
### Layout
To give your processed Markdoc a layout, pass the path to the layout file:
```javascript
import { markdoc } from "markdoc-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: [".svelte", ".md"],
preprocess: [
markdoc({
layout: "/path/to/layout.svelte",
}),
],
};
```
[Frontmatter](#frontmatter) in YAML format is automatically passed to your layout.
The content is passed to a `` tag.
### Schema path
By default, the preprocessor looks for your Markdoc schema definition in a `/markdoc/` directory at the app root.
To use a different path, define the directory in the options:
```javascript
import { markdoc } from "markdoc-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: [".svelte", ".md"],
preprocess: [
markdoc({
schema: "/path/to/schema/directory",
}),
],
};
```