• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

threepointone/markdown-in-js: inline markdown for react/jsx

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

threepointone/markdown-in-js

开源软件地址(OpenSource Url):

https://github.com/threepointone/markdown-in-js

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

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!



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap