Skip to content
inline markdown for react/jsx
JavaScript
Branch: master
Clone or download

Latest commit

Sunil Pai
Sunil Pai Merge pull request #20 from benhjames/patch-1
Fix use of path.parentPath
Latest commit 79f143f Dec 15, 2018

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples use a webpack alias instead of linking Nov 21, 2016
src Fix use of path.parentPath May 11, 2018
.babelrc first commit Nov 19, 2016
.gitignore first commit Nov 19, 2016
README.md Update README.md Nov 23, 2016
babel.js update instructions Nov 21, 2016
package.json 1.1.4 Apr 2, 2018
yarn.lock first commit Nov 19, 2016

README.md

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

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!
You can’t perform that action at this time.