Skip to content

Commit d2f120c

Browse files
Improvements (#66)
* Fix jest testing * add possibility to create components without babel
1 parent 55b2a1d commit d2f120c

9 files changed

Lines changed: 13782 additions & 20 deletions

File tree

ā€ŽREADME.mdā€Ž

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,36 @@ compiled.tree // The React tree of components
5757
compiled.toc // The table of contents, based on usage of headers
5858
```
5959

60-
### Custom components
60+
### Components
6161
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:
6262

63+
<pre lang="js"><code>
64+
import React, {createElement} from 'react'
65+
import marksy from 'marksy'
66+
67+
const compile = marksy({
68+
createElement,
69+
components: {
70+
MyCustomComponent (props) {
71+
Ā  Ā  return &lt;h1>{props.children}&lt;/h1>
72+
}
73+
}
74+
})
75+
76+
/* CREATE MARKDOWN USING MARKSY LANGUAGE:
77+
# Just a test
78+
Ā ```marksy
79+
h(MyCustomComponent, {}, "Some text")
80+
Ā ```
81+
*/
82+
</code></pre>
83+
84+
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.
85+
86+
### Jsx
87+
88+
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:
89+
6390
<pre lang="js"><code>
6491
import React, {createElement} from 'react'
6592
import marksy from 'marksy/components'
@@ -86,8 +113,6 @@ const compile = marksy({
86113
*/
87114
</code></pre>
88115

89-
This will be converted to the component above. You can pass in any kind of props, as if it was normal code.
90-
91116
### Context
92117
You might need to pass in general information to your custom elements and components. You can pass in a context to do so:
93118

ā€Žcomponents.jsā€Ž

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
module.exports = require('./lib/components');
1+
console.warn(
2+
'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"'
3+
);
4+
module.exports = require('./lib/jsx');

ā€Žjsx.jsā€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./lib/jsx');

0 commit comments

Comments
Ā (0)
⚔