https://github.com/threepointone/markdown-in-js
inline markdown for react/jsx
https://github.com/threepointone/markdown-in-js
Last synced: 11 months 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 (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T21:00:48.000Z (over 3 years ago)
- Last Synced: 2024-10-14T16:49:15.782Z (over 1 year 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!