https://github.com/threepointone/markdown-in-js

inline markdown for react/jsx
https://github.com/threepointone/markdown-in-js

Last synced: about 4 hours ago
JSON representation

inline markdown for react/jsx

• Host: GitHub
• URL: https://github.com/threepointone/markdown-in-js
• Owner: threepointone
• Created: 2016-11-19T14:33:23.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T21:00:48.000Z (about 2 years ago)
• Last Synced: 2024-10-14T16:49:15.782Z (2 months ago)
• Language: JavaScript
• Size: 149 KB
• Stars: 784
• Watchers: 11
• Forks: 21
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - markdown-in-js

README

        
markdown-in-js

---

zero-overhead markdown in your react components

usage

---

add `'markdown-in-js/babel'` to the `plugins` field of your babel config

```jsx

import markdown from 'markdown-in-js'

const App = () => markdown`

## This is some content.

You can write _markdown_ as you'd like.

${  interpolate more   }

you can inline *html* or even , wow



  interpolate attributes as expected



`

```


- gets compiled to react elements via a babel plugin

- preserves interpolations

- built with [commonmark](https://github.com/jgm/commonmark.js)

- optionally add [prismjs](http://prismjs.com/) for syntax highlighting of code blocks

custom components

---

You can use custom components for markdown primitives like so -

```jsx

import md from 'markdown-in-js'

import { MyHeading, MyLink } from './path/to/components'

const App = () => md({ h1: MyHeading, a: MyLink })`

# this will be a custom header

[custom link component](/url/to/link)

`

```

todo

---

- optionally no-wrap paragraphs

- optionally return array of elements

- instructions for in-editor syntax highlighting

- add gotchas to docs

- precompile code blocks

- commonmark options

- tests!