Update README & improve manual

Author: cotes2020

Diff for: README.md

@@ -31,6 +31,7 @@ A minimal, sidebar, responsive web design Jekyll theme that focuses on text pres
 - Automatically recommend related posts
 - Syntax highlighting
 - Mathematical expressions
+- Mermaid diagram & flowchart
 - Search
 - Atom Feeds
 - Disqus Comments

Diff for: _posts/2019-08-08-text-and-typography.md

@@ -190,7 +190,7 @@ fi;
 ```
 {% endraw %}
 
-#### HTML
+#### Html
 
 ```html
 <div class="sidenav">
@@ -207,20 +207,26 @@ fi;
 </div>
 ```
 
-**Horizontal Scrolling**
+#### Java
 
-```html
-<div class="panel-group">
-  <div class="panel panel-default">
-    <div class="panel-heading" id="{{ category_name }}">
-      <i class="far fa-folder"></i>
-      <p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
-      </a>
-    </div>
-  </div>
-</div>
-```
+```java
+private void writeObject(java.io.ObjectOutputStream s)
+  throws java.io.IOException {
+  // Write out any hidden serialization magic
+  s.defaultWriteObject();
 
+  // Write out HashMap capacity and load factor
+  s.writeInt(map.capacity());
+  s.writeFloat(map.loadFactor());
+
+  // Write out size
+  s.writeInt(map.size());
+
+  // Write out all elements in the proper order.
+  for (E e: map.keySet())
+    s.writeObject(e);
+}
+```
 
 ## Reverse Footnote
 

Diff for: _posts/2019-08-08-write-a-new-post.md

@@ -8,7 +8,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`. From `v2.4.1`, you can create sub-directories under `_posts/` to categorize posts.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`.
 
 ## Front Matter
 
@@ -78,8 +78,7 @@ mermaid: true
 ---
 ```
 
-Then you can use it like other markdown language: surround the graph code with <code class="language-plaintext highlighter-rouge">```mermaid</code>
-and <code class="language-plaintext highlighter-rouge">```</code>.
+Then you can use it like other markdown language: surround the graph code with <code class="highlighter-rouge">```mermaid</code>.
 
 ## Images
 

Diff for: docs/README.zh-CN.md

@@ -33,6 +33,7 @@ Language: [English](../README.md) | 简体中文
 - 语法高亮
 - 二级目录
 - 数学表达式
+- Mermaid 图表
 - 搜索
 - Atom 订阅
 - Disqus 评论