finish tips switch bot

docs/Instruction/tips/esp32-switch.md

@@ -24,8 +24,8 @@ ESP32
 
 USB-Serial|ESP32-CAM  
 --        |---
-RX        |UOT    
-TX        |UOR     
+RX        |U0T (UART 0 TX)    
+TX        |U0R (UART 0 RX)     
 VCC       |5V  
 GND       |GND  
           |IO0 to GND (When Programming)  
@@ -73,7 +73,7 @@ Ref. [ESP32 Swich bot_JP](https://jorublog.site/esp32cam-iot-swichbot/)
 
 ### Code
 
-```
+``` {linenums="1"}
 //アクセスするときはURLパラメーターの最後に＆をつけること！
 
 #include <WiFi.h>
@@ -268,19 +268,34 @@ GND      |Servo GND
 
 ### How to use
 
+#### Find IP address
+
+- Open Serial monitor and Find IP address
+
+
+#### Replace the IP address in this part of the code
+
+```{linenums="102"}
+client.println("<div class='left block'> <a href='http://192.168.2.111/?angle=50&delay=500&'><button id='entrance_button' class='btn-square-shadow' type='button'>玄関の電気</button></a></div>");          
+client.println("<div class='right block'><a href='http://192.168.2.111/?angle=100&delay=500&'><button id='room_button' class='btn-square-shadow' type='button'>部屋の電気</button></a></div>");
+```
 
 #### Direct switch
-Open in browser
+Access from browser
+
 ```
 http://192.168.2.111/?angle=50&delay=500&
 ```
+
 - 192.168.2.111: loacal IP address of ESP32-CAM in Arduio Sketch
 - angle : servo rotate degree (23-123)
 - delay: set delay when servo move back
 
-#### Switch on screen
+#### Switches on screen
+Open in browser
+
 ```
-http://192.168.1.111
+http://192.168.2.111
 ```
 
 ![](../images/esp32-cam/image-2.png)

docs/Instruction/tips/tab_in_markdown.md

+# Tabs in markdown
+
+## Setup
+
+
+In mkdocs.yml, Add the following [PyMdown](https://facelessuser.github.io/pymdown-extensions/) under markdown_extensions:
+![](../images/tabs/tabs_in_yml.png)
+
+```
+- pymdownx.tasklist:
+    custom_checkbox: true
+- pymdownx.superfences
+- pymdownx.tabbed:
+    alternate_style: true
+```
+
+## How to use Tabs
+
+### Code
+
+```
+<hr />
+=== "tab_1"
+
+    Content of tab_1  
+    ![](../../images/home/relux_deer.gif)
+
+=== "tab_2"
+
+    Content of tab_2  
+    ![](../../images/home/tear_deer.gif)
+```
+
+### Result
+
+<hr />
+=== "tab_1"
+
+    Content of tab_1  
+    ![](../../images/home/relux_deer.gif)
+
+=== "tab_2"
+
+    Content of tab_2  
+    ![](../../images/home/tear_deer.gif)
+
+
+
+
+## How to use Line number
+
+### code
+
+````
+``` {linenums="1"}
+line_1
+line_2
+line_3
+```
+````
+### Result
+
+``` {linenums="1"}
+line_1
+line_2
+line_3
+```
+
+## How to use tasklist
+
+### Code
+
+```
+- [x] tasklist_1
+    - [x] tasklist1-2
+- [ ]  tasklistt_2
+
+```
+
+### Result
+
+- [x] tasklist_1
+    - [x] tasklist1-2
+- [ ]  tasklistt_2

mkdocs.yml

@@ -51,6 +51,11 @@ plugins:
 
 markdown_extensions:
   - extra
+  - pymdownx.tasklist:
+      custom_checkbox: true
+  - pymdownx.superfences
+  - pymdownx.tabbed:
+      alternate_style: true
   - smarty
   - admonition
   - codehilite: