Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvements #66

Merged
merged 3 commits into from
Sep 1, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 28 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,36 @@ compiled.tree // The React tree of components
compiled.toc // The table of contents, based on usage of headers
```

### Custom components
### 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:

<pre lang="js"><code>
import React, {createElement} from 'react'
import marksy from 'marksy'

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

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

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 sagnificantly:

<pre lang="js"><code>
import React, {createElement} from 'react'
import marksy from 'marksy/components'
Expand All @@ -86,8 +113,6 @@ const compile = marksy({
*/
</code></pre>

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:

Expand Down
5 changes: 4 additions & 1 deletion components.js
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
module.exports = require('./lib/components');
console.warn(
'DEPRECATED - Importing "marksy/components" causes a large bundle size. Read updated docs for information on avoiding this. If you want jsx support, import from "marksy/jsx"'
);
module.exports = require('./lib/jsx');
1 change: 1 addition & 0 deletions jsx.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('./lib/jsx');
Loading