live-doc

> 前端框架

开源

将 Markdown 转换为实时 React 演示

99 stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

将 Markdown 转换为实时 React 演示

No longer maintained see https://mdxjs.com for a better alternative

live-doc

Convert markdown to live React demos

Built with: react-markdown, React Live, Rebass, and styled-components

Getting Started

bash

npm i -g live-doc

Convert a markdown file to a React app and save as index.html:

bash

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.

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.

React Live noInline Mode

To enable the noInline mode in React Live, use the ..jsx language attribute at the beginning of a code block.

const Hello = () => 
Hello

const App = () => (
  

)

render()

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.

javascript

// 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'
    }
  ]
}