live-doc
Convert markdown to live React demos http://jxnblk.com/live-doc
Built with: react-markdown, React Live, Rebass, and styled-components
Getting Started
npm i live-doc
Convert a markdown file to a React app and save as index.html
:
doc README.md
Live Code Example
By 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.
CLI Options
-d --out-dir Output directory
-c --config Path to config file
Configuration
To customize the output React app, create a config file that exports an object.
// config.jsmoduleexports = // 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.js
MIT License