Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AlexxNB/svelte-preprocess-markdown
Write Svelte components in markdown syntax
https://github.com/AlexxNB/svelte-preprocess-markdown
Last synced: 5 days ago
JSON representation
Write Svelte components in markdown syntax
- Host: GitHub
- URL: https://github.com/AlexxNB/svelte-preprocess-markdown
- Owner: AlexxNB
- License: mit
- Created: 2019-10-10T12:42:27.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:12:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-28T14:53:45.936Z (11 days ago)
- Language: HTML
- Homepage: https://alexxnb.github.io/svelte-preprocess-markdown/
- Size: 1.27 MB
- Stars: 137
- Watchers: 3
- Forks: 7
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - svelte-preprocess-markdown - Write Svelte components in markdown syntax. (Integrations / Preprocessing)
- awesome-starred - AlexxNB/svelte-preprocess-markdown - Write Svelte components in markdown syntax (others)
README
# svelte-preprocess-markdown
Allows to import `*.md` files as Svelte component. Very useful when your components have a lot of formatted texts and you doesn't want to write it in HTML. It is based on superfast [Marked](https://www.npmjs.com/package/marked) markdown parser.
[](https://www.npmjs.com/package/svelte-preprocess-markdown) [](https://www.npmjs.com/package/svelte-preprocess-markdown) [](https://github.com/AlexxNB/svelte-preprocess-markdown/actions?workflow=Publish+on+NPM)
# Documentaton
* Please, see the [Docs](https://alexxnb.github.io/svelte-preprocess-markdown) for more info
* Or try yourself in the our [Playground](https://alexxnb.github.io/svelte-preprocess-markdown/playground)
# Installation
Install package:
```bash
npm i -D svelte-preprocess-markdown
```
Then, edit `rollup.config.js` file:
```js
// 1. import package
const {markdown} = require('svelte-preprocess-markdown');
export default {
// ...
plugins: [
svelte({
// 2. add '.md', to the extensions
extensions: ['.svelte','.md'],
// 3. add markdown preprocessor
preprocess: markdown()
})
]
}
```
# Usage
## Common usage
```markdown
import Child from './Child.svelte';
let name = 'world';
# Hello {name}!
This is text in `markdown` **notation**
h1{
color:red
}
```
## MDSv usage
The `MDSv` format is [MDX](https://mdxjs.com/)-like way to write documents using imported Svelte-components.
```markdown
import Block from './Block.svelte';
import { data } from './my_data.js';
# The MDSv example
You can use *components* and a *logic* inside doc:
My `data` list:
{#each data as item}
{item}
{/each}
```
# Options
You can pass any [options](https://marked.js.org/#/USING_ADVANCED.md#options) that are accepted by [Marked](https://www.npmjs.com/package/marked).
```js
...
plugins: [
svelte({
...
preprocess: markdown({
headerIds: false
})
...
})
]
...
```
## Renderer
If you need `renderer` object for options, you can get it from the package:
```js
const {Renderer} = require('svelte-preprocess-markdown');
const renderer = Renderer();
renderer.heading = function (text, level) {
...
};
const options = {renderer};
```