https://github.com/talentlessguy/hypermdx

⬇ Markdown enhanced with Hyperapp
https://github.com/talentlessguy/hypermdx

hyperapp javascript javascript-library markdown mdx mdx-js

Last synced: about 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 (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T11:18:23.000Z (over 1 year ago)
• Last Synced: 2024-05-04T19:20:25.217Z (about 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

Lists

• 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