# marksy

> Convert markdown into react components

Latest version **8.0.0** (published 2019-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install marksy
pnpm add marksy
yarn add marksy
bun add marksy
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.0.0 |
| Published | 2019-05-24 |
| First published | 2017-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 54.6 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 354 |
| Author | Christian Alfoni |
| Maintainers | christianalfoni, hypnosphi, ndelangen |
| Keywords | convert, markdown, react |

## Links

- npm: https://www.npmjs.com/package/marksy
- Repository: https://github.com/storybooks/marksy
- Issues: https://github.com/storybooks/marksy/issues
- npm.io page: https://npm.io/package/marksy

## Dependencies (3)

- [he](https://npm.io/package/he.md) ^1.2.0
- [marked](https://npm.io/package/marked.md) ^0.3.12
- [@babel/standalone](https://npm.io/package/@babel/standalone.md) ^7.4.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 8.0.0 (latest) — 2019-05-24
- 7.0.1 — 2019-04-25
- 7.0.0 — 2019-04-25
- 6.1.0 — 2018-09-01
- 6.0.3 — 2018-01-06
- 6.0.2 — 2018-01-04
- 6.0.1 — 2017-12-11
- 6.0.0 — 2017-12-10
- 5.0.0 — 2017-07-22
- 4.0.0 — 2017-06-26
- 3.2.1 — 2017-06-26
- 3.2.0 — 2017-06-26
- 3.1.4 — 2017-06-24
- 3.1.3 — 2017-06-22
- 3.1.2 — 2017-06-22
- … 14 more at https://npm.io/package/marksy/versions

## README

# Marksy
A markdown to custom components library. Supports any virtual DOM library.

## Installation

```sh
npm install marksy
```

## Usage
```js
import React, {createElement} from 'React';
import marksy from 'marksy'
// const marksy = require('marksy').marksy

const compile = marksy({
  // Pass in whatever creates elements for your
  // virtual DOM library. h('h1', {})
  createElement,

  // You can override the default elements with
  // custom VDOM trees
  elements: {
    h1 ({id, children}) {
      return <h1 className="my-custom-class">{children}</h1>
    },
    h2 ({id, children}) {},
    h3 ({id, children}) {},
    h4 ({id, children}) {},
    blockquote ({children}) {},
    hr () {},
    ol ({children}) {},
    ul ({children}) {},
    p ({children}) {},
    table ({children}) {},
    thead ({children}) {},
    tbody ({children}) {},
    tr ({children}) {},
    th ({children}) {},
    td ({children}) {},
    a ({href, title, target, children}) {},
    strong ({children}) {},
    em ({children}) {},
    br () {},
    del ({children}) {},
    img ({src, alt}) {},
    code ({language, code}) {},
    codespan ({children}) {},
  },
});

const compiled = compile('# hello', {
  // Options passed to "marked" (https://www.npmjs.com/package/marked)
});

compiled.tree // The React tree of components
compiled.toc // The table of contents, based on usage of headers
```

### Components
You can also add your own custom components. You do this by importing `marksy/jsx`. This build of marksy includes babel transpiler which will convert any HTML to elements and allow for custom components:

<pre lang="js"><code>
import React, {createElement} from 'react'
import marksy from 'marksy'

const compile = marksy({
  createElement,
  components: {
    MyCustomComponent (props) {
      return &lt;h1>{props.children}&lt;/h1>
    }
  }
})

/* CREATE MARKDOWN USING MARKSY LANGUAGE:
  # Just a test
  ```marksy
  h(MyCustomComponent, {}, "Some text")
  ```
*/
</code></pre>

This will be converted to the component above. You can pass in any kind of props, as if it was normal code. If you are not familiar with `h`, this is a convention for creating elements and components in virtual dom implementations.

### Jsx

You can take one step further and create components wherever you want in the markdown, using jsx. You will have to import `marksy/jsx`. This build of marksy includes babel transpiler which will convert any HTML to elements and allow for custom components. Note that this will increase your bundle size sagnificantly:

<pre lang="js"><code>
import React, {createElement} from 'react'
import marksy from 'marksy/jsx'

const compile = marksy({
  createElement,
  components: {
    MyCustomComponent (props) {
      return &lt;h1>{props.children}&lt;/h1>
    }
  }
})

/* MARKDOWN:
  # Just a test
  &lt;MyCustomComponent>some text&lt;/MyCustomComponent>
*/

/* WITH LANGUAGE FOR GENERIC SUPPORT:
  # Just a test
  ```marksy
  &lt;MyCustomComponent>some text&lt;/MyCustomComponent>
  ```
*/
</code></pre>

### Context
You might need to pass in general information to your custom elements and components. You can pass in a context to do so:

```js
import React, {createElement} from 'react'
import marksy from 'marksy/jsx'

const compile = marksy({
  createElement,
  elements: {
    h1(props) {
      return <h1>{props.context.foo}</h1>
    }
  },
  components: {
    MyCustomComponent (props) {
      return <h1>{props.context.foo}</h1>
    }
  }
})

compile('<MyCustomComponent />', null, {
  foo: 'bar'
})
```

### Code highlighting
To enable code highlighting you just need to add a method that does the transformation. Here is an example with [Highlight.js](https://highlightjs.org/), but you could also use [Prism](http://prismjs.com/). Both of them support server side rendering. For example:

```js
import {createElement} from 'react'
import 'highlight.js/styles/github.css';
import hljs from 'highlight.js/lib/highlight';
import hljsJavascript from 'highlight.js/lib/languages/javascript';
import marksy from 'marksy/jsx'

hljs.registerLanguage('javascript', hljsJavascript);

const compile = marksy({
  createElement,
  highlight(language, code) {
    return hljs.highlight(language, code).value
  }
})
```

The elements returned is:

```html
<pre>
  <code class="language-js">
    ...code...
  </code>
</pre>
```

Meaning that the `code` element is added a classname based on the language.

## Developing
1. Clone repo
2. `yarn install`
3. `yarn start` -> localhost:8080 (development app)

---
_Source: https://npm.io/package/marksy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._