Skip to content

Latest commit

 

History

History
69 lines (52 loc) · 1.49 KB

README.md

File metadata and controls

69 lines (52 loc) · 1.49 KB
Raw

markdown-in-js

zero-overhead markdown in your react components

usage

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

import markdown /* or `md` */ from 'markdown-in-js' 

const App = () => markdown`
## This is some content. 
You can write _markdown_ as you'd like. 

${ <span> interpolate more <Content/> </span> }

you can <i>inline *html*</i> or even <OtherComponents/>, wow

<div style=${{ fontWeight: 'bold' }} 
    className=${'some more styles'} 
    onClick=${handler}>
  interpolate attributes as expected
</div>
`
  • gets compiled to react elements via a babel plugin
  • preserves interpolations
  • built with commonmark
  • optionally add prismjs for syntax highlighting of code blocks

custom components

You can use custom components for markdown primitives like so -

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)
`

pragma

To use a differently named function / variable, you can override the markdown pragma -

// @markdown myMd
let myMd = require('markdown-in-js')({ h1: customHeader })
// ...
mMyd`# custom title`

todo

  • optionally no-wrap paragraphs
  • optionally return array of elements
  • instructions for in-editor syntax highlighting
  • precompile code blocks
  • commonmark options
  • tests!