markdown-in-js

inline markdown for react/jsx

  • Owner: threepointone/markdown-in-js
  • Platform:
  • License::
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

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!

Main metrics

Overview
Name With Ownerthreepointone/markdown-in-js
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:
所有者活动
Created At2016-11-19 14:33:23
Pushed At2022-12-06 21:00:48
Last Commit At2018-12-15 08:04:09
Release Count10
Last Release Namev1.1.4 (Posted on 2018-04-02 20:44:06)
First Release Namev1.0.1 (Posted on 2016-11-19 20:11:03)
用户参与
Stargazers Count786
Watchers Count11
Fork Count20
Commits Count37
Has Issues Enabled
Issues Count13
Issue Open Count7
Pull Requests Count4
Pull Requests Open Count12
Pull Requests Close Count6
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private