doc: Add usage document.

Author: jaywcjlove

README.md

@@ -1,5 +1,6 @@
 React Code Preview
 ---
+<!--dividing-->
 
 Code editor for React. Preview Demo: https://uiwjs.github.io/react-code-preview
 
@@ -22,6 +23,7 @@ const code = `import { Button, Divider, Icon } from 'uiw';
 ReactDOM.render(
   <div>
     <Button type="primary">主要按钮</Button>
+    <Button type="success">成功按钮</Button>
   </div>,
   _mount_
 );
@@ -43,31 +45,34 @@ class Demo extends React.Component {
 
 ### Props
 
-```jsx
-/**
- * To specify a CSS class, use the className attribute.
- */
-className?: string;
-/**
- * `JSX` source code
- */
-code?: string;
-/**
- * Whether to display the code interface.
- */
-noCode?: boolean;
-/**
- * Is the background white or plaid?
- */
-bgWhite?: boolean;
-/**
- * Whether to display the preview interface.
- */
-noPreview?: boolean;
-/**
- * Dependent component
- */
-dependencies?: { [key: string]: any };
+```ts
+export interface ICodePreviewProps {
+  prefixCls?: string;
+  /**
+   * To specify a CSS class, use the className attribute.
+   */
+  className?: string;
+  /**
+   * `JSX` source code
+   */
+  code?: string;
+  /**
+   * Whether to display the code interface.
+   */
+  noCode?: boolean;
+  /**
+   * Is the background white or plaid?
+   */
+  bgWhite?: boolean;
+  /**
+   * Whether to display the preview interface.
+   */
+  noPreview?: boolean;
+  /**
+   * Dependent component
+   */
+  dependencies?: { [key: string]: any };
+}
 ```
 
 ## Development

package-lock.json

@@ -39,6 +39,7 @@
     "@kkt/plugin-less": "^1.2.0",
     "@types/classnames": "^2.2.7",
     "@types/codemirror": "0.0.76",
+    "@types/highlight.js": "^9.12.3",
     "@types/react": "^16.8.17",
     "@types/react-dom": "^16.8.4",
     "@types/react-test-renderer": "^16.8.1",
@@ -47,6 +48,7 @@
     "babel-plugin-transform-remove-imports": "^1.0.8",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "compile-less-cli": "^1.1.5",
+    "highlight.js": "^9.15.9",
     "kkt": "^4.2.0",
     "raw-loader": "^3.1.0",
     "react": "^16.8.6",

package.json

@@ -7,10 +7,13 @@ body, html {
 .warpper {
   padding: 20px;
   height: 300px;
+  max-width: 995px;
+  margin: 0 auto;
 }
 
 .title {
   font-weight: bold;
   font-size: 26px;
   margin-bottom: 26px;
+  text-align: center;
 }

website/App.less website/App.module.lesswebsite/App.less renamed to website/App.module.less

@@ -1,13 +1,21 @@
 import React from 'react';
-import { Switch, Divider, Button } from "uiw";
+import { Switch, Divider, Button } from 'uiw';
+import Markdown from './Markdown';
+import GithubCorner from './GithubCorner';
 import CodePreview from '../src';
-import './App.less';
+import DocumentStr from '../README.md'; // @ts-ignore
+import styles from './App.module.less';
 
 const code = `import { Button, Divider, Icon } from 'uiw';
 
 ReactDOM.render(
   <div>
     <Button type="primary">主要按钮</Button>
+    <Button type="success">成功按钮</Button>
+    <Button type="warning">警告按钮</Button>
+    <Button type="danger">错误按钮</Button>
+    <Button type="light">亮按钮</Button>
+    <Button type="dark">暗按钮</Button>
   </div>,
   _mount_
 );
@@ -30,9 +38,12 @@ export default class App extends React.PureComponent<{}, IAppState> {
     this.setState({ ...state });
   }
   render () {
+    let DocumentStrSource = DocumentStr;
+    if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
     return (
-      <div className="warpper">
-        <h1 className="title">React Code Preview</h1>
+      <div className={styles.warpper}>
+        <GithubCorner url="https://uiwjs.github.io/react-code-preview" />
+        <h1 className={styles.title}>React Code Preview</h1>
         <CodePreview
           code={code}
           dependencies={{ Button }}
@@ -70,6 +81,7 @@ export default class App extends React.PureComponent<{}, IAppState> {
             是否显示实例预览 `noPreview`
           </Switch>
         </div>
+        <Markdown source={DocumentStrSource} />
       </div>
     )
   }

website/App.tsx

@@ -0,0 +1,32 @@
+
+a.corner {
+  position: fixed; 
+  top: 0; 
+  right: 0; 
+  svg {
+    fill:#e1e1e1;
+    color:#000;
+    position:absolute;
+    top:0;
+    border:0;
+    right:0;
+    z-index:99;
+    width:4.375rem;
+    height:4.375rem;
+  }
+  &:hover :global(.octo-arm) {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+
+@keyframes octocat-wave {
+  0%,100% {
+    transform:rotate(0);
+  }
+  20%,60% {
+    transform:rotate(-25deg);
+  }
+  40%,80% {
+    transform:rotate(10deg);
+  }
+}

website/GithubCorner/index.module.less

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './index.module.less';
+
+export default function GithubCorner({ url }: { url: string }) {
+  if (!url) {
+    return null;
+  }
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" className={styles.corner}>
+      <svg viewBox="0 0 250 250">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+        <path fill="currentColor" style={{ transformOrigin: '130px 106px' }} className="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" />
+        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body" />
+      </svg>
+    </a>
+  );
+}

website/GithubCorner/index.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import ReactMarkdown, { MarkdownAbstractSyntaxTree} from 'react-markdown';
+import hljs from 'highlight.js';
+import classNames from 'classnames';
+import styles from './styles/index.module.less';
+
+hljs.configure({
+  tabReplace: '  ', // 2 spaces
+  classPrefix: '', // don't append class prefix
+});
+
+export interface IMarkdown {
+  source?: string;
+}
+
+export default class Markdown extends Component<IMarkdown> {
+  public mdDom = React.createRef<HTMLDivElement>();
+  componentDidMount() {
+    if (this.mdDom.current){ 
+      const code = this.mdDom.current.getElementsByTagName('code');
+      for (let i = 0; i < code.length; i += 1) {
+        if (code[i] && /^language/.test(code[i].className) && code[i].parentNode && (code[i].parentNode as HTMLElement).tagName) {
+          hljs.highlightBlock(code[i]);
+        }
+      }
+    }
+  }
+  render() {
+    const { source } = this.props;
+    return (
+      <div ref={this.mdDom}>
+        <ReactMarkdown
+          className={classNames(styles.markdown, 'markdown')}
+          source={source}
+          escapeHtml={false}
+        />
+      </div>
+    );
+  }
+}