Convert markdown to live React demos http://jxnblk.com/live-doc
Built with: react-markdown, React Live, Rebass, and styled-components
npm i -g live-docConvert a markdown file to a React app and save as index.html:
doc README.mdBy using the .jsx language attribute at the beginning of a code block,
live-doc will convert the example into a live-editable example using React Live.
<div>
<Heading color='tomato'>
Hello! Edit me
</Heading>
<button
onClick={e => {
alert('Hello')
}}
children='Beep'
/>
</div>In this example, the Rebass Heading component has been added to the scope in the docs/config.js file,
making it available to the React Live preview.
To enable the noInline mode
in React Live, use the ..jsx language attribute at the beginning of a code block.
const Hello = () => <h1>Hello</h1>
const App = () => (
<div>
<Hello />
<button
onClick={e => {
alert('Beep')
}}
children='Beep'
/>
</div>
)
render(<App />)-d --out-dir Output directory
-c --config Path to config file
To customize the output React app, create a config file that exports an object.
// config.js
module.exports = {
// Scope for react-live previews
scope: {
foo: 'Hello'
},
title: 'Page Title',
css: 'body { color: tomato }',
script: 'console.log("Hello");',
// Meta tags
meta: [
{
name: 'og:image',
content: 'kitten.jpg'
}
]
}Then pass the file with the --config flag to the CLI.
doc README.md --config config.jsMIT License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent