From f157b9f22949f7bcdafec7ed567c6260fe27df9e Mon Sep 17 00:00:00 2001
From: wangze <73400@163.com>
Date: Sat, 13 Mar 2021 15:49:18 +0800
Subject: [PATCH] :memo: update GBlog-wx doc

---
 docs/gblog-wx/README.md       |  5 +--
 docs/gblog-wx/custom-style.md | 65 +++++++++++++++++++++++++++++++++--
 docs/gblog-wx/directory.md    | 11 ++++--
 3 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/docs/gblog-wx/README.md b/docs/gblog-wx/README.md
index cca6253..caac029 100644
--- a/docs/gblog-wx/README.md
+++ b/docs/gblog-wx/README.md
@@ -3,8 +3,9 @@
 <p align="center">
  <img src="https://gitee.com/fuzui/GBlog-wx/badge/star.svg?theme=dark" alt="Build Status">
  <img src="https://img.shields.io/github/stars/fuzui/GBlog-wx.svg?style=social" alt="Build Status">
- <img src="https://img.shields.io/badge/halo-1.4.1-brightgreen" alt="Build Status">
+ <img src="https://img.shields.io/badge/halo-1.4.5-brightgreen" alt="Build Status">
 </p>
+
 GBlog-wx：微信小程序博客
 
 > 我们只是搬运工，将color-ui样式与halo接口结合了一下。
@@ -23,7 +24,7 @@ GBlog-wx：微信小程序博客
 * [halo](https://github.com/halo-dev/halo) 一个优秀的开源博客发布应用
 * [ColorUI](https://github.com/weilanwl/ColorUI) 鲜亮的高饱和色彩，专注视觉的小程序组件库
 * [Parser](https://github.com/jin-yufeng/Parser) 小程序富文本插件（html 渲染）
-* [Painter](https://github.com/Kujiale-Mobile/Painter) 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片
+* [mp-html](https://github.com/jin-yufeng/mp-html) 小程序富文本组件，支持渲染和编辑 html，支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用
 
 ### 联系
 
diff --git a/docs/gblog-wx/custom-style.md b/docs/gblog-wx/custom-style.md
index 93feae1..3e533d2 100644
--- a/docs/gblog-wx/custom-style.md
+++ b/docs/gblog-wx/custom-style.md
@@ -1,7 +1,7 @@
 ---
 title: 自定义样式
 ---
-> 自定义文章解析样式
+* 自定义文章解析样式
 
 在`api.js`文件中，修改`ParserStyle`.
 
@@ -10,11 +10,70 @@ const ParserStyle = {
   table: 'border-collapse:collapse;border-top:1px solid gray;border-left:1px solid gray;margin: 28rpx 0;',
   th: 'border-right:1px solid gray;border-bottom:1px solid gray;background: #ccc;',
   td: 'border-right:1px solid gray;border-bottom:1px solid gray;',
-  pre: 'display: block;background: hsl(30, 20%, 25%);color: white;text-shadow: 0 -.1em .2em black;font-family: monospace;font-size: 1em;text-align: left;white-space: pre;word-spacing: normal;word-break: normal;word-wrap: normal;line-height: 1.5;tab-size: 4;hyphens: none;margin: 28rpx 0;',
-  blockquote: 'background-color:#e7f6ed;border-left:6px solid #4caf50;color:rgb(136, 136, 136);padding: 20rpx 40rpx 20rpx 30rpx;margin: 28rpx 0;'
+  blockquote: 'background-color:#e7f6ed;border-left:6px solid #4caf50;color:rgb(136, 136, 136);padding: 20rpx 40rpx 20rpx 30rpx;margin: 28rpx 0;',
+  ul: 'padding-left: 25px;',
+  ol: 'padding-left: 25px;',
+  h1: 'font-size: 1.5em;line-height: 50px;',
+  h2: 'font-size: 1.17em;line-height: 40px;',
+  h3: 'font-size: 0.83em;line-height: 30px;',
+  h4: 'font-size: 0.67em;line-height: 30px;',
+  h5: 'font-size: 0.50em;line-height: 30px;'
 }
 
 ```
 
 `table`、`th`、`td`为表格样式；`pre`为代码块样式；`blockquote`为引用样式，你也可以增加更多，例如`tr`、`a`、`h1`等。
 
+
+
+* 代码高亮
+
+当前支持`html、css、C-like、JavaScript、shell、bash、docker、git、php、nginx、less、json、java、go、properties、sql、yaml`，主题为`Tomorrow Night`。
+
+需按以下步骤来实现更多扩展及自定义：
+
+1. 下载[mp-html](https://github.com/jin-yufeng/mp-html)
+
+   git 方式
+
+   ```shell
+   # 通过 github 获取
+   git clone https://github.com/jin-yufeng/mp-html.git
+   # 或通过 gitee 获取
+   git clone https://gitee.com/jin-yufeng/mp-html.git
+   ```
+
+   下载zip
+
+   *github releases*：https://github.com/jin-yufeng/mp-html/releases
+   *gitee releases*：https://gitee.com/jin-yufeng/mp-html/releases
+
+   
+
+   > 先装好node环境
+
+2. 自定义高亮代码
+
+   前往 [官网](https://prismjs.com/download.html) 下载对应的 *prism.min.js* （选择Minified version，下载后`prism.js`重命名为`prism.min.js`）和 *prism.css* 并替换 mp-html中*plugins/highlight/* 目录下的文件。
+
+3. 开启插件
+
+   在 mp-html中*tools/config.js* 文件中，将`plugins`中audio（音乐播放器）、highlight（代码高亮）、markdown（解析 md）取消注释。
+
+   修改`plugins/highlight/config.js`中`copyByLongPress: true`以开启代码块复制功能。
+
+4. 打包
+
+   在mp-html根目录输入以下命令
+
+   * `npm install`
+
+     > 如果过慢可使用` npm install --registry=https://registry.npm.taobao.org`
+
+   * `npm run build:weixin`
+
+5. 替换组件
+
+   将mp-html的`/dist`文件夹下的`mp-weixin`粘贴并完全替换小程序中`/components`下的`mp-weixin`文件夹。
+
+6. 更多解析样式参考：[mp-html文档](https://jin-yufeng.gitee.io/mp-html)
\ No newline at end of file
diff --git a/docs/gblog-wx/directory.md b/docs/gblog-wx/directory.md
index 447628e..c18d0c1 100644
--- a/docs/gblog-wx/directory.md
+++ b/docs/gblog-wx/directory.md
@@ -5,14 +5,19 @@ title: 代码结构
 ```
 GBLOG-WX     
 ├── cloudfunctions		// 云服务
-├── colorui            	// color-ui组件库 
-├── component           // 自定义组件
+├── components        	// 自定义组件
 │       └── article-list     // 文章列表
 │       └── painter          // painter小程序生成图片组件
-│       └── parser           // parser富文本组件
+│       └── mp-weixin        // mp-html小程序富文本组件
 ├── config 				// 配置文件
+├── custom-tab-bar    	// 自定义tabbar
 ├── images      		// 图片
 ├── pages   			// 页面代码
+├── services        	// 封装方法
+│       └── api              // 接口实现
+│       └── posters          // 海报样式
+├── styles          	// 样式
+│       └── colorui          // color-ui组件库 
 ├── utils      			// 公用js
 ```
 
-- 
GitLab