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

Thinkmill/react-markings: **Markdown** in <Components/>, <Components/&g ...

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

开源软件名称(OpenSource Name):

Thinkmill/react-markings

开源软件地址(OpenSource Url):

https://github.com/Thinkmill/react-markings

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

Recommendation: Use MDX, it's the same thing, but better

(Although this library may be easier for you to integrate while MDX tools get built)


react-markings

Markdown in components, components in markdown

  • Allows you to write markdown using commonmark.js
  • Renders markdown as React elements using commonmark-react-renderer
  • Embed React components inside your markdown (in any paragraph position) like this:
import * as React from 'react';
import md from 'react-markings';

function Example() {
  return (
    <pre>
      <code>...</code>
    </pre>
  );
}

export default function ReadMe() {
  return md`
    # react-markings

    > Markdown in components, components in markdown

    - Allows you to write markdown using [commonmark.js](https://github.com/commonmark/commonmark.js)
    - Renders markdown as React elements using [commonmark-react-renderer](https://github.com/rexxars/commonmark-react-renderer)
    - Embed React components inside your markdown (in any paragraph position) like this:

    ${<Example/>}
  `;
}

If you want to customize rendering further, you can use customize to pass your own renderers.

import * as React from 'react';
import md from 'react-markings';

let customMd = md.customize({
  renderers: {
    // customize heading with class
    heading: props => React.createElement('h' + props.level, { className: 'fancy-heading' }, props.children),
  },
});

export default function CustomHeading() {
  return customMd`
    # Fancy Heading
  `;
}



鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
npm/marky-markdown: npm&#39;s markdown parser发布时间:2022-08-18
下一篇:
bradtraversy/next-markdown-blog: Simple blog using Next and Markdown发布时间:2022-08-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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