在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):storybookjs/marksy开源软件地址(OpenSource Url):https://github.com/storybookjs/marksy开源编程语言(OpenSource Language):JavaScript 99.1%开源软件介绍(OpenSource Introduction):MarksyA markdown to custom components library. Supports any virtual DOM library. Installationnpm install marksy Usageimport 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 ComponentsYou 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 JsxYou can take one step further and create components wherever you want in the markdown, using jsx. You will have to import 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>
```
*/ ContextYou 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 highlightingTo 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 Developing
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论