# code-preview

> Code view for React

Latest version **1.0.7** (published 2018-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install code-preview
pnpm add code-preview
yarn add code-preview
bun add code-preview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2018-11-13 |
| First published | 2018-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 28.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zhang5431235@gmail.com |
| Maintainers | mori1993 |
| Keywords | code-view, editor |

## Links

- npm: https://www.npmjs.com/package/code-preview
- Repository: https://github.com/FedWithMori/code-preview
- Homepage: https://github.com/FedWithMori/code-preview#readme
- Issues: https://github.com/FedWithMori/code-preview/wiki
- npm.io page: https://npm.io/package/code-preview

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^16.4.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [rsuite](https://npm.io/package/rsuite.md) ^2.0.12
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [codemirror](https://npm.io/package/codemirror.md) ^5.32.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [rsuite-theme](https://npm.io/package/rsuite-theme.md) ^2.0.14
- [react-markdown-reader](https://npm.io/package/react-markdown-reader.md) ^1.1.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.7 (latest) — 2018-11-13
- 1.0.6 — 2018-11-13
- 1.0.5 — 2018-10-29
- 1.0.4 — 2018-10-29
- 1.0.3 — 2018-10-29
- 1.0.2 — 2018-10-26
- 1.0.1 — 2018-10-26
- 1.0.0 — 2018-10-25

## README

# code-preview

##### 代码fork自[simonguo](https://github.com/simonguo/react-code-view)，为了个性化需求，所以重新导入了一份便于修改。


## 需求

- 让 Markdown 中的代码可以运行，并预览效果。
- 代码可以在线编辑。
- 不影响整个文档流的布局。
- 支持 React, 支持代码高亮。
- 可以配置 babel。
- 支持一个markdown书写多个案例【新增】


## 原理

- 就通过 `markdown-loader` 与 `html-loader` 解析 Markdown 文档。
- 通过正则表达式取出 code ，交给  `codemirror`
- 把 `codemirror` 中的代码通过 babel 编译，再通过 ReactDOM.render 渲染到指定的容器中。

## 安装

```
npm install react-code-view
```


### 配置 webpack

在 webpack 中需要添加对 `markdown-loader` 的支持。 需要安装：

```
npm install html-loader --save-dev
npm install markdown-loader --save-dev
npm install react-markdown-reader --save-dev
```

`webpack.config.js` 配置

** >=webpack 2.x +**

```js

const markdownRenderer = require('react-markdown-reader').renderer;

{
  test: /\.md$/,
  use: [{
    loader: 'html-loader'
  }, {
    loader: 'markdown-loader',
    options: {
      pedantic: true,
      renderer: markdownRenderer(/**languages:Array<string>**/)
    }
  }]
}
```

languages 默认值：`["javascript", "bash", "xml", "css", "markdown", "less"]`;

Github: https://github.com/simonguo/react-markdown-reader

### 添加 Babel

示例代码中通常是使用到 ES2015+ , React 等，需要对代码实时做编译，所以在 html 中引入 babel :
```html
<script type="text/javascript" src="//cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js"></script>
```

## 示例

```js

import CodeView from 'react-code-view';
import '~react-code-view/lib/less/index.less';

import { Button } from 'rsuite';


<CodeView dependencies={{ Button }} >
  {require('./example.md')}
</CodeView>

```

源代码都统一写在 markdown 中，参考:
[example.md](https://github.com/FedWithMori/code-preview/blob/master/docs/example.md)

> 这里需要注意的是把需要运行的代码一定要放在 `<!--start-code-->` 与  `<!--end-code-->` 之间。
> 最后一个代码块以后的内容需要用<!--parameter-description-->声明一下


## API

| Name                  | Type    | Default value                               | Description                       |
| --------------------- | ------- | ------------------------------------------- | --------------------------------- |
| dependencies          | Object  |                                             | 依赖的组件                        |
| showCode              | boolean | true                                        | 显示代码                          |
| babelTransformOptions | Object  | { presets: ['stage-0', 'react', 'es2015'] } | babel 配置参数 [options][babeljs] |


[babeljs]: https://babeljs.io/docs/usage/api/#options

---
_Source: https://npm.io/package/code-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._