Convert markdown into react components
npm install marksy``sh`
npm install marksy
js
import React, {createElement} from 'React';
import marksy from 'marksy'
// const marksy = require('marksy').marksyconst 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
{children}
},
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
`$3
You can also add your own custom components. You do this by importing . This build of marksy includes babel transpiler which will convert any HTML to elements and allow for 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.$3
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 sagnificantly:
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>
`
*/
$3
You might need to pass in general information to your custom elements and components. You can pass in a context to do so:`js
import React, {createElement} from 'react'
import marksy from 'marksy/jsx'const compile = marksy({
createElement,
elements: {
h1(props) {
return
{props.context.foo}
}
},
components: {
MyCustomComponent (props) {
return {props.context.foo}
}
}
})compile('
foo: 'bar'
})
`$3
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:js
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:
html
...code...
`Meaning that the
element is added a classname based on the language.Developing
1. Clone repo
2. yarn install
3.