Skip to content

threepointone/markdown-in-js

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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!