change docs format

docs/assets/css/main.css

@@ -728,7 +728,7 @@ mark {
 
 .anchor-box {
 	position: fixed;
-	top: 25%;
+	top: 22%;
 	left: 50px;
 	display: -webkit-flex;
 	display: flex;
@@ -833,7 +833,7 @@ mark {
 @media screen and (max-width:768px) {
 	.anchor-box {
 		position: fixed;
-		top: 35%;
+		top: 32%;
 		left: auto;
 		right: -120px;
 		display: -webkit-flex;

docs/en/hat/hat-beetlec.md

@@ -68,14 +68,14 @@ Besides, a power switch is placed at the front.
 
 ## Example
 
-### UIFlow**
-
-<img src="assets\img\product_pics\hat\beetlec_hat\beetlec.webp" width="60%" height="60%">
-
-### Arduino IDE
+### 1. Arduino IDE
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/beetleC/stickC/beetleC)
 
+### 2. UIFlow**
+
+<img src="assets\img\product_pics\hat\beetlec_hat\beetlec.webp" width="60%" height="60%">
+
 <script>
 
    var purchase_link = 'https://m5stack.com/products/beetlec-w-o-m5stickc';

docs/en/hat/hat-bugc.md

@@ -63,14 +63,14 @@ The Bugc base needs to be used in conjunction with the M5StickC controller. The
 
 ## Example
 
-- **UIFlow**
-
-<img src="assets\img\product_pics\hat\bugc_hat\bugc.webp" width="30%" height="30%">
-
-**Arduino**
+### 1. Arduino
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/BugC/bugC)
 
+### 2. UIFlow
+
+<img src="assets\img\product_pics\hat\bugc_hat\bugc.webp" width="30%" height="30%">
+
 <script>
 
    var purchase_link = 'https://m5stack.com/products/bugc-w-o-m5stickc';

docs/en/hat/hat-cardkb.md

@@ -54,7 +54,7 @@ The CardKB HAT also offers support for several button combinations (Shift+Key, F
 
 ?>3. Currently EasyLoader is only available for Windows operating system,  Before installing and using the Easyloader for M5Core, you need to install CP210X driver (you do not need to install with M5StickC as controller)[Click here to view the driver installation tutorial](en/related_documents/M5Burner#install-usb-driver)
 
-## PinMap
+## Pin Map
 
 **ATMega328 ISP**Download interface Pin foot definition
 
@@ -62,11 +62,11 @@ The CardKB HAT also offers support for several button combinations (Shift+Key, F
 
 ## Example
 
-### Arduino IDE
+### 1. Arduino IDE
 
 To get the code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)
 
-### UIFLOW
+### 2. UIFLOW
 
 <img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat.webp" width="30%" height="30%">
 

docs/en/hat/hat-dac.md

@@ -62,16 +62,16 @@ I2C address: 0x60
 
 ## Example
 
-### UIFlow*
+###  1. Arduino IDE
+
+To get complete code, please click [here](https://github.com/m5stack/M5StickC/blob/master/examples/Hat/DAC)
+
+### 2. UIFlow
 
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets/img/product_pics/hat/dac_hat/dac.webp">
 
-###  Arduino IDE
-
-To get complete code, please click [here](https://github.com/m5stack/M5StickC/blob/master/examples/Hat/DAC)
-
 ### Pin Map
 
 <table>

docs/en/hat/hat-env.md

@@ -77,16 +77,16 @@
 
 ## Example
 
-### UIFlow
+### 1. Arduino
+
+Please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV) to get complete code
+
+### 2. UIFlow
 
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets/img/product_pics/hat/env_hat/env.webp">
 
-### Arduino
-
- Please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV) to get complete code
-
 ### Pin Map
 
 <table>

docs/en/hat/hat-finger.md

@@ -58,16 +58,16 @@ UART settings:
 
 ## Example
 
-- **UIFlow**
+### 1. Arduino
+
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/finger-hat/Arduino/FINGER)
+
+### 2. UIFlow
 
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets/img/product_pics/hat/finger_hat/finger.webp">
 
-- **Arduino**
-
-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/finger-hat/Arduino/FINGER)
-
 ## Document
 
 - Protocol **[FINGER series communication protocol](https://github.com/m5stack/M5-Schematic/blob/master/Units/finger/biovo_fingerprint_Protocol_en.DOC)**

docs/en/hat/hat-joyc.md

@@ -42,16 +42,15 @@
 
 ## Example
 
-- **UIFlow**
-
-<img src="assets\img\product_pics\hat\JoyC_hat\JoyC.webp" width="50%" height="50%">
-
-- **Arduino**
+### 1.Arduino
 
 Use with RoverC HAT, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/JoyC)
 
 Use alone [here](https://github.com/m5stack/M5StickC/blob/master/examples/Hat/JoyC/JoyC.ino)
 
+### 2. UIFlow
+
+<img src="assets\img\product_pics\hat\JoyC_hat\JoyC.webp" width="50%" height="50%">
 
 <script>
 

docs/en/hat/hat-joystick.md

@@ -77,14 +77,14 @@ Register:
 
 ## Example
 
-- **UIFlow**
-
-<img src="assets\img\product_pics\hat\joystick_hat\joystick.webp" width="60%">
-
-- **Arduino**
+### 1. Arduino
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)
 
+### 2. UIFlow
+
+<img src="assets\img\product_pics\hat\joystick_hat\joystick.webp" width="60%">
+
 ## Pin Map
 
 <table>

docs/en/hat/hat-ncir.md

@@ -52,16 +52,16 @@ Connect with M5StickC via GOIO 0/26 (I2C add: 0x5A).<br>
 
 ## Example
 
-- **UIFlow**
+### 1. Arduino
+
+[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)
+
+### 2. UIFlow
 
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets\img\product_pics\hat\ncir_hat\ncir.webp">
 
-- **Arduino**
-
-[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)
-
 ### Pin Map
 
 <table>

docs/en/hat/hat-neoflash.md

@@ -24,7 +24,7 @@ If you thinking about adding a display on your project, NeoFlash is a good choic
 - Dimension：58mm x 23.5mm x 1mm
 - Weight：2g
 
-## Includes
+## Include
 
 - 1x Neoflash HAT
 - 2x 8 pin 2.54mm bend pin set（90°）
@@ -57,7 +57,7 @@ If you thinking about adding a display on your project, NeoFlash is a good choic
 
 ## Example
 
-- **Arduino**
+### 1. Arduino
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/neoflash-hat/Arduino)
 

docs/en/hat/hat-pir.md

@@ -61,16 +61,16 @@
 
 ## Example
 
-- **UIFlow**
+### 1. Arduino
+
+ Please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/PIR) to get complete code
+
+### 2. UIFlow
 
 Open http://flow.m5stack.com and click Demo to load
 
 <img src="assets\img\product_pics\hat\pir_hat\pir.webp">
 
-- **Arduino**
-
- Please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/PIR) to get complete code
-
 ### Pin Map
 
 <table>

docs/en/hat/hat-powerc.md

@@ -39,16 +39,16 @@
 
 ## Example
 
-- **UIFlow**
+### 1. Arduino
+
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)
+
+### 2. UIFlow
 
 If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/UIFlow)
 
 <img src="assets\img\product_pics\hat\PowerC_hat\PowerC.webp" width="80%">
 
-- **Arduino**
-
-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)
-
 ## EasyLoader
 
 >EasyLoader is a concise and fast program writer, which has a built-in case program related to the product. It can be burned to the main control by simple steps to perform a series of function verification. Please install the corresponding driver according to the device type. M5Core host [Please click here to view the CP210X driver installation tutorial](en/arduino/arduino_development), M5StickC/V/T/ATOM series can be used without driver)

docs/en/hat/hat-puppyc.md

@@ -30,7 +30,7 @@ It walks slowly and is easy to control.Due to the small contact area, the moveme
 - Remote Control Robot 
 - Smart and cognitive toys
 
-## Package Includes
+## Include
 
 - 1x PuppyC base
 - 1x 16340 Battery(750mAh)
@@ -48,16 +48,16 @@ It walks slowly and is easy to control.Due to the small contact area, the moveme
 
 ## Example
 
-- **UIFlow**
+### 1. Arduino IDE
+
+To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC)
+
+### 2. UIFlow
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC/UIFlow)
 
 <img src="assets/img/product_pics/hat/puppyc_hat/puppy.webp">
 
-### Arduino IDE
-
-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC)
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/puppyc-w-o-m5stickc';

docs/en/hat/hat-roverc.md

@@ -78,17 +78,16 @@ MotorControl：
 
 ## Example
 
-### UIFlow
+### 1. Arduino IDE
+
+Use with JoyC HAT, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/RoverC)
+
+Use alone [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Application/RoverC_Arduino_Alone)
+
+### 2. UIFlow
 
 <img src="assets\img\product_pics\hat\roverc_hat\roverC.webp" width="40%" height="30%">
 
-### Arduino IDE
-
-Use with JoyC HAT, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/RoverC).*
-
-*Use alone [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Application/RoverC_Arduino_Alone
-)
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/all/products/rovercw-o-m5stickc';

docs/en/hat/hat-rs485.md

@@ -58,7 +58,7 @@ It is used to convert the TTL standard to the RS485 standard. If the outside ser
 
 <a href="#en\uiflow\RS485">Exapmle</a>
 
-### Arduino IDE
+### 1. Arduino IDE
 
 To get complete code, please click [here](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/RS485)
 

docs/en/hat/hat-servo.md

@@ -18,7 +18,7 @@
 - Size：24mm * 29mm * 23mm
 - weight：9g
 
-## Included
+## Include
 
 - 1x Servo HAT
 
@@ -44,14 +44,14 @@
 
 ## Example
 
-- **UIFlow**
-
-<img src="assets/img/product_pics/hat/servo_hat/servo.webp" width="50%" height="50%">
-
-- **Arduino**
+### 1. Arduino
 
 To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/servo-hat/Arduino/SERVO)
 
+### 2. UIFlow
+
+<img src="assets/img/product_pics/hat/servo_hat/servo.webp" width="50%" height="50%">
+
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-servo-hat';

docs/en/hat/hat-spk.md

@@ -63,16 +63,16 @@
 
 ## Example
 
-- **UIFlow**
+### 1. Arduino
+
+[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)
+
+### 2. UIFlow
 
 Open http://flow.m5stack.com and Load Demo
 
 <img src="assets\img\product_pics\hat\spk_hat\spk.webp" >
 
-- **Arduino**
-
-[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)
-
 ### Pin Map
 
 <table>

docs/en/hat/hat-thermal.md

@@ -60,16 +60,16 @@ The I2C address is **0x33**. (GOIO 0/26)
 
 ## Example
 
-- **UIFlow**
+### 1. Arduino
+
+[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)
+
+### 2. UIFlow
 
 If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/MLX90640/UIFlow)
 
 <img src="assets/img/product_pics/hat/thermal_hat/thermal.webp">
 
-- **Arduino**
-
-[Click here to download Arduino code](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)
-
 ### Pin Map
 
 <table>