docs: 更新使用指南和开发指南

Author: lxfriday

README.md

@@ -1,46 +1,59 @@
-<div align="center">
-<a href="https://mdnice.com">
-<img width="200" src="./logo.png"/>
-</a>
-</div>
-<h1 align="center">Markdown Nice</h1>
-<p align="center"><img src="https://api.travis-ci.org/zhning12/markdown-nice.svg?branch=master"></p>
+# markdown-nice
 
-## 简介
+## usage
 
-- 支持自定义样式的 Markdown 编辑器
-- 支持微信公众号排版
-- 支持知乎、稀土掘金、博客园和CSDN等一系列平台
-- 内容和自定义样式浏览器中实时保存
-- 支持上传图片、脚注、公式
-- 欢迎[在线使用](https://mdnice.com/)
+目前仅支持 React
 
-## 示例
+1、安装 markdown-nice
 
-- 橙心：[终于等到你，公众号排版神器](https://mp.weixin.qq.com/s/raFgkqlV5hZmrXiEWVAyfQ)
-- 姹紫：[JavaScript 数据结构与算法之美](https://mp.weixin.qq.com/s/KmoRDGdJLZ7reMfTDDaFGg)
-- 绿意：[前端硬核面试专题之 CSS 55 问](https://mp.weixin.qq.com/s/SVKMsQtOLNqYXeT_f95FUw)
-- 红绯：[日常 | 我用什么工具写作？](https://mp.weixin.qq.com/s/DrvJBEWqH14atF_4O1IXFw)
-- Wechat-Format：[Markdown Nice新特性：阿里云图床](https://mp.weixin.qq.com/s/QPsOUkLCsvhqSicTOGaHJg)
+```shell
+$ yarn add markdown-nice
+```
 
-> 欢迎提供更多文章示例~~
+或者
 
-## 开发文档
+```shell
+$ npm install markdown-nice --save
+```
 
-开发文档请参考本项目的[wiki](https://github.com/zhning12/markdown-nice/wiki/%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3)
+2、在 index.html 文件中添加下面代码
 
-## 关于
+```html
+<link href="https://draw-wechat.oss-cn-hangzhou.aliyuncs.com/KaTeX/0.5.1/katex.min.css" rel="stylesheet" />
+<style id="basic-theme" type="text/css"></style>
+<style id="markdown-theme" type="text/css"></style>
+<style id="code-theme" type="text/css"></style>
+<style id="font-theme" type="text/css"></style>
+```
 
-目前 mdnice 已经有了一定量的用户，故而组建了**微信群**，欢迎反馈意见和公众号大佬们一起交流，扫一扫二维码拉你入群。
+3、示例代码
 
-<img width="250px" src="https://draw-wechat.oss-cn-hangzhou.aliyuncs.com/%E7%89%A7%E7%A0%81%E5%95%A6%E5%B0%8F%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81_20190929092055.JPG"/>
+```jsx
+import React from "react";
+import MarkdownNice from "markdown-nice";
 
+function App() {
+  return (
+    <div>
+      <MarkdownNice />
+    </div>
+  );
+}
 
-欢迎打赏哟，您的支持是我最大的动力！
+export default App;
+```
 
-<img width="250px" src="https://draw-wechat.oss-cn-hangzhou.aliyuncs.com/%E6%89%93%E8%B5%8F%E4%BA%8C%E7%BB%B4%E7%A0%81_20190825201704.png"/>
+## 组件化分支开发流程
 
-## 参考资料
+1. 初始化一个新项目
+2. 在本项目下执行 `yarn link`
+3. 在本项目内运行 `yarn watch`，将会自动监听 `src` 下的文件变动，自动将新代码编译到 `lib`
+4. 在新项目中执行 `yarn link markdown-nice`
+5. 启动新项目 `yarn start`
 
-- [md2all](https://md.aclickall.com/)
-- [wechat-format](https://github.com/lyricat/wechat-format)
+## todo
+
+- [ ] 自动注入 style 文件
+- [ ] 提供对外的 props 配置
+- [ ] 压缩代码
+- [ ] 提供 ts types