Introduce the prompts in docs

_posts/2019-08-08-text-and-typography.md

@@ -76,7 +76,18 @@ Moon
 
 ## Block Quote
 
-> This line to shows the Block Quote.
+> This line shows the _block quote_.
+
+## Prompts
+
+> An example showing the `note` type prompt.
+{: .prompt-note }
+
+> An example showing the `warning` type prompt.
+{: .prompt-warning }
+
+> An example showing the `danger` type prompt.
+{: .prompt-danger }
 
 ## Tables
 

_posts/2019-08-08-write-a-new-post.md

@@ -28,7 +28,8 @@ tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
 
-> **Note**: The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
+> The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
+{: .prompt-note }
 
 ### Timezone of Date
 
@@ -131,7 +132,10 @@ Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`heig
 
 ### Position
 
-By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`. For example:
+By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`.
+
+> Once the position is specified, the image caption should not be added.
+{: .prompt-warning }
 
 - **Normal position**
 
@@ -156,8 +160,6 @@ By default, the image is centered, but you can specify the position by using one
   ```
   {: .nolineno}
 
-> **Limitation**: Once the position of the image is specified, the image caption should not be added.
-
 ### Shadow
 
 The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
@@ -245,6 +247,28 @@ pin: true
 ---
 ```
 
+## Prompts
+
+There are three types of prompts, `note`, `warning` and `danger`. When writing, add the class `prompt-{type}` to a blockquote:
+
+- **Note**
+  ```md
+  > Example line for prompt.
+  {: .prompt-note }
+  ```
+
+- **Warning**
+  ```md
+  > Example line for prompt.
+  {: .prompt-warning }
+  ```
+
+- **Danger**
+  ```md
+  > Example line for prompt.
+  {: .prompt-danger }
+  ```
+
 ## Code Block
 
 Markdown symbols ```` ``` ```` can easily create a code block as follows:
@@ -265,7 +289,8 @@ key: value
 ```
 ````
 
-> **Limitation**: The Jekyll style `highlight` tag is not compatible with this theme.
+> The Jekyll tag `{% highlight %}` is not compatible with this theme.
+{: .prompt-danger }
 
 ### Line Number
 

_posts/2019-08-09-getting-started.md

@@ -36,7 +36,8 @@ And then execute:
 $ bash tools/init.sh
 ```
 
-> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
+> If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
+{: .prompt-note }
 
 The above command will:
 

_posts/2019-08-11-customize-the-favicon.md

@@ -32,6 +32,7 @@ The following table will help you understand the changes to the favicon files:
 | `*.PNG`             | ✓                                 | ✗           |
 | `*.ICO`             | ✓                                 | ✗           |
 
-> Note: ✓ means keep, ✗ means delete.
+>  ✓ means keep, ✗ means delete.
+{: .prompt-note }
 
 The next time you build the site, the favicon will be replaced with a customized edition.

_posts/2021-01-03-enable-google-pv.md

@@ -146,7 +146,9 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
     ```
     {: file="src/config.py"}
 
-    **Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
+    > You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`.
+    > But, for the sake of keeping it simple, we will be using the Google provided default URL.
+    {: .prompt-note }
 
 5.  From inside the src/ directory, deploy the app
 

_tabs/about.md

@@ -4,5 +4,5 @@ icon: fas fa-info-circle
 order: 4
 ---
 
-
+> Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.
-> **Note**: Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.
+{: .prompt-note }