storybooks/marksy

Name: marksy

Owner: Storybook

Description: A markdown to custom VDOM components library

Created: 2017-04-14 13:27:00.0

Updated: 2018-01-18 13:34:10.0

Pushed: 2018-01-18 16:01:00.0

Homepage:

Size: 337

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Marksy

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

Installation

install marksy

Usage

rt React, {createElement} from 'React';
rt marksy from 'marksy'
onst marksy = require('marksy').marksy

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

 You can override the default elements with
 custom VDOM trees
ements: {
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}) {},



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


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

Custom components

You can also add your own custom components. You do this by importing marksy/components. 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/components'

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>
  ```
*/

This will be converted to the component above. You can pass in any kind of props, as if it was normal code.

Context

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

rt React, {createElement} from 'react'
rt marksy from 'marksy/components'

t compile = marksy({
eateElement,
ements: {
h1(props) {
  return <h1>{props.context.foo}</h1>
}

mponents: {
MyCustomComponent (props) {
  return <h1>{props.context.foo}</h1>
}



ile('<MyCustomComponent />', null, {
o: '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:

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

.registerLanguage('javascript', hljsJavascript);

t compile = marksy({
eateElement,
ghlight(language, code) {
return hljs.highlight(language, code).value

The elements returned is:

>
ode class="language-js">
...code...
code>
e>

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

Developing

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