Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dillonchanis/solidjs-markdoc
SolidJS renderer for Markdoc
https://github.com/dillonchanis/solidjs-markdoc
javascript markdoc markdown solid solidjs
Last synced: 11 days ago
JSON representation
SolidJS renderer for Markdoc
- Host: GitHub
- URL: https://github.com/dillonchanis/solidjs-markdoc
- Owner: dillonchanis
- Created: 2022-05-14T20:01:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-05-15T12:38:36.000Z (over 2 years ago)
- Last Synced: 2024-10-07T13:48:46.925Z (about 1 month ago)
- Topics: javascript, markdoc, markdown, solid, solidjs
- Language: TypeScript
- Homepage:
- Size: 43.9 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# solidjs-markdoc
Render [Markdoc](https://markdoc.io/) syntax with SolidJS.
## Install
```bash
npm install solidjs-markdoc
```
## Usage
### Simple Markdown
You can provide simple markdown strings to the renderer to render Markdoc.
```js
import Markdoc from "@markdoc/markdoc";
import render from "solidjs-markdoc";
function App() {
const md = `
# Hello World
We can render markdown.
`;
const ast = Markdoc.parse(md);
const content = Markdoc.transform(ast);
return render(content);
}
```
### Markdoc Schema and SolidJS Components
Setup a Markdoc schema.
```
schema/
└── Alert.markdoc.ts
```
```js
// schema/Alert.markdoc.ts
export default {
render: "Alert",
description: "Display the enclosed content in an alert box",
children: ["paragraph", "tag", "list"],
attributes: {
type: {
type: String,
default: "default",
matches: ["default", "info", "warning", "error", "success"],
},
},
};
```
Create your Solid component.
```js
function Alert({ type, children }) {
return (
{children}
);
}
```
Import the renderer and schema into your component.
```js
import Markdoc from "@markdoc/markdoc";
import render from "solidjs-markdoc";
import alert from "./schema/Alert.markdoc";
function Alert({ type, children }) {
return (
{children}
);
}
function App() {
//...
}
```
Create the `config` to pass into your `Markdoc.transform` call.
```js
function App() {
const md = `
# Getting started
You can run SolidJS components in here.
Check this alert:
{% alert type="info" %}
Hey there! Something to look at!
{% /alert %}
`;
const config = {
tags: {
alert,
},
};
const ast = Markdoc.parse(md);
const content = Markdoc.transform(ast, config);
//...
}
```
Finally, return the result of the `render` function making sure to supply your custom component to the render function's `components` object.
```js
function App() {
// ...
return render(content, {
components: {
Alert,
},
});
}
```
## Full Example
```js
const alert = {
render: "Alert",
description: "Display the enclosed content in an alert box",
children: ["paragraph", "tag", "list"],
attributes: {
type: {
type: String,
default: "default",
matches: ["default", "info", "warning", "error", "success"],
},
},
};
function Alert({ type, children }) {
return (
{children}
);
}
function App() {
const md = `
# Getting started
You can run SolidJS components in here.
Check this alert:
{% alert type="info" %}
Hey there! Something to look at!
{% /alert %}
`;
const config = {
tags: {
alert,
},
};
const ast = Markdoc.parse(md);
const content = Markdoc.transform(ast, config);
return render(content, {
components: {
Alert,
},
});
}
```