Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/talentlessguy/hypermdx
⬇ Markdown enhanced with Hyperapp
https://github.com/talentlessguy/hypermdx
hyperapp javascript javascript-library markdown mdx mdx-js
Last synced: 2 months ago
JSON representation
⬇ Markdown enhanced with Hyperapp
- Host: GitHub
- URL: https://github.com/talentlessguy/hypermdx
- Owner: talentlessguy
- License: mit
- Created: 2021-01-13T20:29:50.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T11:18:23.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T05:21:35.943Z (2 months ago)
- Topics: hyperapp, javascript, javascript-library, markdown, mdx, mdx-js
- Language: TypeScript
- Homepage:
- Size: 400 KB
- Stars: 19
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-node-esm - hypermdx - Markdown enhanced with Hyperapp (Packages / SSR)
- hyperawesome - hypermdx - Markdown enhanced with Hyperapp (Utilities)
README
# HyperMDX
[![npm-badge]][npm-url] [![dl-badge]][npm-url] [![Coveralls][cov-badge-url]][cov-url]
HyperMDX is an MDX-like library to enhance markdown with [Hyperapp](https://github.com/jorgebucaran/hyperapp).
## Features
- Custom components for HTML elements
- Embed Hyperapp components inside a page
- Async and sync modes
- Remark plugins support
## Install
```sh
pnpm i hypermdx
```
## Example
```js
import { App } from '@tinyhttp/app'
import { h, text } from 'hyperapp'
import { renderToStream } from 'hyperapp-render'
import { hypermdx } from 'hypermdx'
const Component = (children: string) => h('h3', { style: { color: 'red' } }, text(children))
const md = hypermdx({
components: {
h1: (n, p, c) => h(n, { style: { color: 'blue' }, ...p }, c)
}
})
const content = md`
# This is a custom heading defined in components
- this is a list
- yet another list
${Component('custom component')}
`
new App().get(async (_, res) => renderToStream(content).pipe(res)).listen(3000)
```
Output:
```html
This is a custom heading defined in components
-
this is a list
-
yet another list
custom component
```
## API
### `hypermdx(options)`
Creates an function to render markdown and components.
```js
const mdx = hypermdx()
md('Hello World', Component('hello'))
```
Additionally it supports template strings.
```js
const mdx = hypermdx()
md`
# Hello World
${Component('hello')}
`
```
### Options
#### components
- Default: `{}`
Custom components to be used instead of default HTML tags.
```js
const md = hypermdx({
components: {
h1: (name, props, children) => h(name, { style: { color: 'blue' }, ...props }, children)
}
})
```
#### h
- Default: `hyperapp.h`
Hyperscript function.
```js
import { hyperscript2 } from 'my-own-lib'
const md = hypermdx({ h: hyperscript2 })
md`
# Hello World
`
```
#### remarkPlugins
- Default: `[]`
Additional [Remark](https://github.com/remarkjs/remark) plugins.
```js
import hypermdx from 'hypermdx'
import capitalize from 'remark-capitalize'
import emoji from 'remark-emoji'
const md = hypermdx({ remarkPlugins: [emoji, capitalize] })
```
### `async(options)`
Same as `hypermdx` but instead, it returns an async function.
```js
import { async as hypermdx } from 'hypermdx'
const md = hypermdx()
await md`
# Hello World
`
```
[npm-badge]: https://img.shields.io/npm/v/hypermdx?style=flat-square&color=%234AB8F2
[dl-badge]: https://img.shields.io/npm/dt/hypermdx?style=flat-square&color=%234AB8F2
[npm-url]: https://npmjs.com/package/hypermdx
[cov-badge-url]: https://img.shields.io/coveralls/github/talentlessguy/hypermdx?style=flat-square&color=%234AB8F2
[cov-url]: https://coveralls.io/github/talentlessguy/hypermdx