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

storybookjs/marksy:

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

开源软件名称(OpenSource Name):

storybookjs/marksy

开源软件地址(OpenSource Url):

https://github.com/storybookjs/marksy

开源编程语言(OpenSource Language):

JavaScript 99.1%

开源软件介绍(OpenSource Introduction):

Marksy

A markdown to custom components library. Supports any virtual DOM library.

Installation

npm install marksy

Usage

import React, {createElement} from 'React';
import marksy from 'marksy'
// const marksy = require('marksy').marksy

const compile = marksy({
  // Pass in whatever creates elements for your
  // virtual DOM library. h('h1', {})
  createElement,

  // You can override the default elements with
  // custom VDOM trees
  elements: {
    h1 ({id, children}) {
      return <h1 className="my-custom-class">{children}</h1>
    },
    h2 ({id, children}) {},
    h3 ({id, children}) {},
    h4 ({id, children}) {},
    blockquote ({children}) {},
    hr () {},
    ol ({children}) {},
    ul ({children}) {},
    p ({children}) {},
    table ({children}) {},
    thead ({children}) {},
    tbody ({children}) {},
    tr ({children}) {},
    th ({children}) {},
    td ({children}) {},
    a ({href, title, target, children}) {},
    strong ({children}) {},
    em ({children}) {},
    br () {},
    del ({children}) {},
    img ({src, alt}) {},
    code ({language, code}) {},
    codespan ({children}) {},
  },
});

const compiled = compile('# hello', {
  // Options passed to "marked" (https://www.npmjs.com/package/marked)
});

compiled.tree // The React tree of components
compiled.toc // The table of contents, based on usage of headers

Components

You can also add your own custom components:

import React, {createElement} from 'react'
import marksy from 'marksy'

const compile = marksy({
  createElement,
  components: {
    MyCustomComponent (props) {
      return <h1>{props.children}</h1>
    }
  }
})

/* CREATE MARKDOWN USING MARKSY LANGUAGE:
  # Just a test
  ```marksy
  h(MyCustomComponent, {}, "Some text")
  ```
*/

This will be converted to the component above. You can pass in any kind of props, as if it was normal code. If you are not familiar with h, this is a convention for creating elements and components in virtual dom implementations.

Jsx

You can take one step further and create components wherever you want in the markdown, using jsx. You will have to import marksy/jsx. This build of marksy includes babel transpiler which will convert any HTML to elements and allow for custom components. Note that this will increase your bundle size significantly:

import React, {createElement} from 'react'
import marksy from 'marksy/jsx'

const compile = marksy({
  createElement,
  components: {
    MyCustomComponent (props) {
      return <h1>{props.children}</h1>
    }
  }
})

/* MARKDOWN:
  # Just a test
  <MyCustomComponent>some text</MyCustomComponent>
*/

/* WITH LANGUAGE FOR GENERIC SUPPORT:
  # Just a test
  ```marksy
  <MyCustomComponent>some text</MyCustomComponent>
  ```
*/

Context

You might need to pass in general information to your custom elements and components. You can pass in a context to do so:

import React, {createElement} from 'react'
import marksy from 'marksy/jsx'

const compile = marksy({
  createElement,
  elements: {
    h1(props) {
      return <h1>{props.context.foo}</h1>
    }
  },
  components: {
    MyCustomComponent (props) {
      return <h1>{props.context.foo}</h1>
    }
  }
})

compile('<MyCustomComponent />', null, {
  foo: 'bar'
})

Code highlighting

To enable code highlighting you just need to add a method that does the transformation. Here is an example with Highlight.js, but you could also use Prism. Both of them support server side rendering. For example:

import {createElement} from 'react'
import 'highlight.js/styles/github.css';
import hljs from 'highlight.js/lib/highlight';
import hljsJavascript from 'highlight.js/lib/languages/javascript';
import marksy from 'marksy/jsx'

hljs.registerLanguage('javascript', hljsJavascript);

const compile = marksy({
  createElement,
  highlight(language, code) {
    return hljs.highlight(language, code).value
  }
})

The elements returned is:

<pre>
  <code class="language-js">
    ...code...
  </code>
</pre>

Meaning that the code element is added a classname based on the language.

Developing

  1. Clone repo
  2. yarn install
  3. yarn start -> localhost:8080 (development app)



鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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