diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e3104e4
--- /dev/null
+++ b/README.md
@@ -0,0 +1,71 @@
+# vditor-halo-render
+
+vditor halo render是一款用于halo-plugin-vditor的自定义解析器，可以解析自定义的语法来输出HTML结构。可以应用于文章的编写。 本解析器主要用于markdown编辑器。
+
+例如:
+
+**>>INPUT**
+
+```plaintext
+tips:info
+This is a info tips
+```
+
+**<<OUTPUT**
+
+```html
+<div class="halo-render halo-render-wrapper tips tips-info">
+    <div>This is a info tips</div>
+</div>
+```
+
+## 如何使用
+
+您可以直接引用releases包下的index.js和index.css，并将fonts和icons目录拷贝到可访问的路径。
+解析器导出了一个`HaloJs`对象可供使用。
+
+要进行解析处理您仅需要使用下面的方法即可进行处理。
+
+```js
+HaloJs.renderHalo("tips:info\nThis is a info tips", "/")
+```
+
+renderHalo方法会返回解析后的html结构。renderHalo的参数与返回值如下：
+
+```ts
+/**
+ * 解析自定义渲染
+ * @param content 待渲染的文本
+ * @param cdn 资源链接前缀
+ * @return 资源渲染结果
+ */
+function renderHalo(content: string, cdn: string): string;
+```
+
+## 语法参考
+
+- [语法介绍](doc/general.md)
+- [Tips组件](doc/tips.md)
+- [Git组件](doc/git.md)
+- [资源组件](doc/drive.md)
+
+## 开发
+
+1. 安装依赖
+
+    ```shell
+    npm install
+    ```
+
+2. 启动开发环境
+
+    ```shell
+    npm run dev
+    ```
+
+3. 打包
+
+    ```shell
+    npm run build
+    ```
+
diff --git a/demo/index.js b/demo/index.js
index 616ede5..eacc530 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -50,6 +50,10 @@ git:[@github/justice2001/halo-plugin-vditor]
 
 ---
 
+git:[@gitee/blossom-editor/blossom]
+
+---
+
 drive:baidu
 name: 网站资源集合
 link: https://www.baidu.com/
diff --git a/doc/assets/drive.png b/doc/assets/drive.png
new file mode 100644
index 0000000..0824037
Binary files /dev/null and b/doc/assets/drive.png differ
diff --git a/doc/assets/git.png b/doc/assets/git.png
new file mode 100644
index 0000000..de37e43
Binary files /dev/null and b/doc/assets/git.png differ
diff --git a/doc/assets/tips.png b/doc/assets/tips.png
new file mode 100644
index 0000000..9405e70
Binary files /dev/null and b/doc/assets/tips.png differ
diff --git a/doc/drive.md b/doc/drive.md
new file mode 100644
index 0000000..a534262
--- /dev/null
+++ b/doc/drive.md
@@ -0,0 +1,46 @@
+# 资源分享组件
+
+资源分享组件可以帮助用户生成一个分享展示的模块，它会包含资源平台、资源内容、链接按钮和提取码的信息。
+
+当前资源平台支持百度网盘和阿里网盘的显示。
+
+## 语法
+
+```markdown
+drive:<platform>
+name: <title>
+link: <link>
+password: <password>
+```
+
+- `name`: 展示的资源标题
+- `link`: 跳转到资源的链接
+- `password`: 可选，资源提取码
+
+## platform
+
+当前支持的平台：
+
+- `baidu`: 百度网盘
+- `ali`: 阿里云盘
+
+平台实际上只是一个icon和标题的组合，并不会影响资源的访问，如果您不介意，您可以在下方的配置中填写任意的链接。
+
+## 示例
+
+- 阿里云盘
+  
+    ```markdown
+    drive:ali
+    name: 网站资源集合
+    link: https://www.ali.com/
+    ```
+  
+- 百度网盘
+
+    ```markdown
+    drive:baidu
+    name: 网站资源集合
+    link: https://www.baidu.com/
+    password: 1234
+    ```
diff --git a/doc/general.md b/doc/general.md
new file mode 100644
index 0000000..69e1bd2
--- /dev/null
+++ b/doc/general.md
@@ -0,0 +1,29 @@
+# 语法设计
+
+## 类型标识
+
+解析器使用输入文本的第一行来标识渲染的类型，当前支持下面几种类型：
+
+- `tips` 提供多彩的提示组件
+- `git` 提供Git仓库信息的组件
+- `drive` 提供资源下载的组件
+
+渲染类型标识可以在后方加入一些子类型或配置信息，格式如下: 
+
+```plaintext
+<type>:<option | sub_type>
+```
+
+例如tips组件在后方标识了子类型，如`tips:danger`则表示使用`tips`解析器，解析为danger样式。
+
+git组件则在后方标识了一组配置，如`git:[@github/justice2001/halo-plugin-vditor]`
+
+具体的行为可以由解析器来自定义。
+
+## 内容
+
+从第二行起至最后一行，均为内容部分，这一部分会被作为整体传入到解析器中，解析器可以根据需要来设计语法。
+
+如`drive`组件则在此处处理附加的长配置信息。
+
+而`tips`则会将此部分内容解析为html附加到内容中。
diff --git a/doc/git.md b/doc/git.md
new file mode 100644
index 0000000..fa44e71
--- /dev/null
+++ b/doc/git.md
@@ -0,0 +1,55 @@
+# Git组件
+
+![Git Module](assets/git.png)
+
+Git组件为用户提供了在页面中嵌入git仓库的解决方案，常用的使用场景是为开源项目开发者发布文章时可以将此Git仓库快速嵌入到文章之中。
+
+当前git组件支持的平台包括
+
+- `GitHub`: 无需配置URL
+- `Gitee`: 无需配置URL
+
+## 语法
+
+```markdown
+git:[<url>@<platform>/<owner>/<repository>]
+```
+
+### url
+
+URL是平台的URL，当前为保留字段，为后续加入自建Gitlab和Gitea做支持准备。如果您使用的是官方的平台则无需填写此字段。
+
+URL示例：`https://gitlab.example.com/`
+
+### platform
+
+标识平台类型，解析器会根据不同的平台选择不同的API和返回值处理方式。当前解析器支持下列平台：
+
+- `Github`：仅支持官方平台
+- `Gitee`：仅支持官方平台
+
+### owner
+
+仓库所有者
+
+### repository
+
+仓库名称
+
+## 示例
+- GitHub平台
+
+    ```markdown
+    git:[@github/justice2001/halo-plugin-vditor]
+    ```
+- Gitee平台
+
+    ```markdown
+    git:[@gitee/blossom-editor/blossom]
+    ```
+
+- Gitea平台（当前未实现）
+
+  ```markdown
+  git:[https://git.mczhengyi.top@gitea/zhengyi/halo-plugin-vidtor]
+  ```
diff --git a/doc/tips.md b/doc/tips.md
index 1d006bf..7593370 100644
--- a/doc/tips.md
+++ b/doc/tips.md
@@ -1,27 +1,21 @@
 # Tips组件
 
-使用`tips:[type]`来启用，type支持`info`, `success`, `danger`, `warn`四种类型
+![Tips Module](assets/tips.png)
 
+Tips为用户提供了多彩的提示组件，支持五种类型：`default`、`danger`、`success`、`warn`、`info`。
+
+同时内容支持渲染HTML内容。
+
+## 语法
+
+```markdown
+tips:<type>
+<content>
 ```
-tips:info
 
-Here is success
-
----
-
-tips:success
-
-Here is success
-
----
+## 示例
 
+```markdown
 tips:danger
-
-Here is danger
-
----
-
-tips:warn
-
-Here is Warning
+This is a Danger type tips
 ```
diff --git a/src/constant.ts b/src/constant.ts
index 4cb10f6..3ab8154 100644
--- a/src/constant.ts
+++ b/src/constant.ts
@@ -4,6 +4,15 @@ export const RENDER_CLASS = "halo-render halo-render-wrapper"
 export const LANGUAGE_COLOR: {[key: string]: string} = {
     "Java": "#b07219",
     "JavaScript": "#f1e05a",
+    "TypeScript": "#3178c6",
+    "Go": "#00ADD8",
+    "Shell": "#89e051",
+    "C": "#555555",
+    "C++": "#f34b7d",
+    "C#": "#178600",
+    "Python": "#3572A5",
+    "Rust": "#3572A5",
+    "MATLAB": "#e16737",
     "Lua": "#000080",
     "Default": "#333333"
 }
diff --git a/src/fonts/iconfont.ttf b/src/fonts/iconfont.ttf
index 4a10055..2693a92 100644
Binary files a/src/fonts/iconfont.ttf and b/src/fonts/iconfont.ttf differ
diff --git a/src/fonts/iconfont.woff b/src/fonts/iconfont.woff
index b86c60f..5a7ce1e 100644
Binary files a/src/fonts/iconfont.woff and b/src/fonts/iconfont.woff differ
diff --git a/src/fonts/iconfont.woff2 b/src/fonts/iconfont.woff2
index 63cae8e..bd7601b 100644
Binary files a/src/fonts/iconfont.woff2 and b/src/fonts/iconfont.woff2 differ
diff --git a/src/less/render.less b/src/less/render.less
index 6533285..904adf7 100644
--- a/src/less/render.less
+++ b/src/less/render.less
@@ -2,33 +2,39 @@
 
 .halo-render {
  margin: 5px;
-}
 
-.invalid-type {
- color: red;
- font-size: 20px;
- text-align: center;
- padding: 10px;
- background-color: lightpink;
- border-radius: @border-radius;
+ .btn {
+  background-color: @info-color;
+  color: #ffffff;
+  padding: 5px 8px;
+  text-align: center;
+  border-radius: @border-radius;
+  font-size: 14px;
+  min-width: 80px;
+  text-decoration: none;
+ }
+
+ .error {
+  text-align: center;
+  color: @danger-color;
+ }
+
+ .invalid-type {
+  color: red;
+  font-size: 20px;
+  text-align: center;
+  padding: 10px;
+  background-color: lightpink;
+  border-radius: @border-radius;
+ }
+
+ .iconfont {
+  font-family: iconfont, sans-serif;
+  font-size: 16px;
+ }
 }
 
 .halo-render-wrapper {
   margin: 20px 15px;
 }
 
-.btn {
- background-color: @info-color;
- color: #ffffff;
- padding: 5px 8px;
- text-align: center;
- border-radius: @border-radius;
- font-size: 14px;
- min-width: 80px;
- text-decoration: none;
-}
-
-.error {
- text-align: center;
- color: @danger-color;
-}
diff --git a/src/provider/drive-provider.ts b/src/provider/drive-provider.ts
index b8597a5..ccc5d43 100644
--- a/src/provider/drive-provider.ts
+++ b/src/provider/drive-provider.ts
@@ -29,7 +29,7 @@ export class DriveProvider implements Provider {
                 `<span>${PLATFORM_LIST[driveInfo.platform].name}</span>` +
                 `</div>`
             html += `<div class="drive-info"> ${platform} <div class="drive-title">${driveInfo.name}</div></div>`
-            html += `<div class="download-info"><a class="btn" href="${driveInfo.link}" target="_blank">下载资源</a>`
+            html += `<div class="download-info"><a class="btn" href="${driveInfo.link}" target="_blank"><span class="iconfont">&#xeb2c;</span>下载资源</a>`
             if (driveInfo.password) {
                 html += `<div class="drive-password">提取码: ${driveInfo.password}</div>`
             }
diff --git a/src/utils/git-processor/git-processor.ts b/src/utils/git-processor/git-processor.ts
index 674951b..3b911dd 100644
--- a/src/utils/git-processor/git-processor.ts
+++ b/src/utils/git-processor/git-processor.ts
@@ -1,10 +1,12 @@
 import {getGitHubInfo} from "./github-utils";
 import {HALO_RENDER_CACHE_VERSION, LANGUAGE_COLOR, RENDER_CLASS} from "../../constant";
+import {getGiteeInfo} from "./gitee-utils";
 
 export const cache: {[key: string]: RepoInfo|-1} = {}
 
 export const utils: {[key: string]: (args: IGitArgs) => Promise<RepoInfo>} = {
-    "github": getGitHubInfo
+    "github": getGitHubInfo,
+    "gitee": getGiteeInfo
 }
 
 export const icons: {[key: string]: string} = {
diff --git a/src/utils/git-processor/gitee-utils.ts b/src/utils/git-processor/gitee-utils.ts
new file mode 100644
index 0000000..c1a9cf5
--- /dev/null
+++ b/src/utils/git-processor/gitee-utils.ts
@@ -0,0 +1,35 @@
+import {IGitArgs, RepoInfo} from "./git-processor";
+
+export async function getGiteeInfo(args: IGitArgs): Promise<RepoInfo> {
+    const info = await fetch(`https://gitee.com/api/v5/repos/${args.owner}/${args.repo}`)
+    const json = await info.json()
+    console.log(info)
+    if (info.status !== 200) return new Promise((resolve, reject) => {
+        reject({
+            code: info.status,
+            msg: json['message']
+        })
+    })
+    const topics: Array<string> = []
+    json["project_labels"].forEach((label: {
+        id: number;
+        name: string;
+        ident: string
+    }) => {
+        topics.push(label.name)
+    })
+    return {
+        platform: "gitee",
+        url: json["html_url"],
+        owner: json["owner"]["login"],
+        name: json["name"],
+        stars: json["stargazers_count"],
+        watchers: json["watchers_count"],
+        language: json["language"],
+        description: json["description"],
+        openIssues: json["open_issues_count"],
+        lastPush: json["pushed_at"],
+        forks: json["forks_count"],
+        topic: topics
+    }
+}