live-doc - GitLite

KO | EN

gitlite — search

#javascript #golang #go #machine-learning #rust #deep-learning #docker #macos #nodejs #cli #kubernetes #vue #ios #mcp

live-doc

(★ 99)

💫 Convert markdown to live React demos

파일 탐색기

최종 버전 다운로드 (.zip)

- live-doc.js
- config.js
- index.html
- App.js
- colors.js
- config.js
- entry.js
- html.js
- index.js
- Live.js
- theme.js
.babelrc
.gitignore
.npmignore
index.js
package.json
README.md
temp.md
test.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/jxnblk/live-doc

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd live-doc

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. 공식 설치 스크립트

쉬움 추천

사전 준비물

Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다.

npm i -g live-doc

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

✅ 설치 후 새 터미널을 열고, 프로그램의 버전 확인 명령(예: --version)으로 정상 설치됐는지 확인하세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i -g live-doc

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

# live-doc

Convert markdown to live React demos <http://jxnblk.com/live-doc>

Built with: [react-markdown][0], [React Live][1], [Rebass][2], and [styled-components][3]

<a class='twitter-share-button'
  href='https://twitter.com/intent/tweet?text=Convert%20markdown%20to%20live%20React%20demos'>
</a>

## Getting Started

```sh
npm i -g live-doc
```

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

```sh
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][1].

```.jsx
<div>
  <Heading color='tomato'>
    Hello! Edit me
  </Heading>
  <button
    onClick={e => {
      alert('Hello')
    }}
    children='Beep'
  />
</div>
```

In this example, the [Rebass][2] `Heading` component has been added to the scope in the `docs/config.js` file,
making it available to the [React Live][1] preview.

### React Live noInline Mode

To enable the [`noInline` mode](https://github.com/FormidableLabs/react-live#liveprovider-)
in React Live, use the `..jsx` language attribute at the beginning of a code block.

```..jsx
const Hello = () => <h1>Hello</h1>

const App = () => (
  <div>
    <Hello />
    <button
      onClick={e => {
        alert('Beep')
      }}
      children='Beep'
    />
  </div>
)

render(<App />)
```

## 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.

```js
// 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.

```sh
doc README.md --config config.js
```

---

[GitHub](https://github.com/jxnblk/live-doc)
[Made by Jxnblk](http://jxnblk.com)

MIT License

[0]: https://github.com/rexxars/react-markdown
[1]: https://github.com/FormidableLabs/react-live
[2]: https://github.com/jxnblk/rebass
[3]: https://github.com/styled-components/styled-components