add regex highlight intro

book.xml

@@ -20,10 +20,11 @@
 		
 		<Chapter root="tools/">
 			<caption>页面选项</caption>
-			<Page id="code-highlight">代码块高亮着色</Page>
+			<Page id="code-highlight">代码高亮</Page>
+			<Page id="code-highlight">RegEx 高亮着色</Page>
 		</Chapter>
 		<Chapter>
-			<caption>高级选项</caption>
+			<caption>站点配置选项</caption>
 			<Page id="enhanced/robots-policy">robots.txt</Page>
 		</Chapter>
 		

tools/regex-highlight.md

@@ -0,0 +1,58 @@
+---
+title: RegEx 高亮着色
+configurations:
+  regex.highlight: 'true'
+---
+
+[regex-colorizer]: https://github.com/suk-ws/regex-colorizer
+
+ph-Bookshelf 通过 JavaScript 库<small>其实是自己写的脚本</small> [regex-colorizer] 支持了对正则表达式 RegEx 进行语法着色。
+
+能够达成像下面一样的着色效果：
+
+{.regex}
+```
+^(?:https?://)?((?:(?:c\.)?vx|fx|www\.)?twitter\.com)/((\w{1,})/status/(\d+)(?:/photo/(\d+))?)/?(\?[\w&=-]+)?$
+
+\92\1^\d{0,3,5}\n{9c}\b{0,2}(\b{,5}){3})\01{}\2{,}\001${0,}
+```
+
+## 开启与使用功能
+
+ph-Bookshelf 默认开启了通过 [regex-colorizer] 进行的 RegEx 高亮着色，你可以通过将 `regex.highlight` 设置为 `false` 来关闭它。
+
+[regex-colorizer] 的默认配置将会自动着色所有包含 css 类 `regex` 的内联代码和代码块，只需要为内容为正则表达式的代码块声明 `regex` 类型即可使用：
+
+{.lang-markdown}
+	像是 `^[0-9a-z]+这样子$`{.regex} 即可。
+	
+	{.regex}
+	```
+	^或者对于代码块而言\.+$
+	```
+	
+	<code class=regex>或者\.\.\. HTML 方式[\.\?]?</code>
+
+> 像是 `^[0-9a-z]+这样子$`{.regex} 即可。
+> 
+> {.regex}
+> ```
+> ^或者对于代码块而言\.+$
+> ```
+> <code class=regex>或者\.\.\. HTML 方式[\.\?]?</code>
+
+---
+
+## Prism 的代码高亮
+
+其实 [Prism 的代码高亮](./code-highlight)也可以高亮着色 RegEx。尽管两者的高亮样式还挺不一样的。
+
+以下是使用 Prism 的 `regex` 语言进行高亮的的 RegEx 效果：
+
+```regex
+^(?:https?://)?((?:(?:c\.)?vx|fx|www\.)?twitter\.com)/((\w{1,})/status/(\d+)(?:/photo/(\d+))?)/?(\?[\w&=-]+)?$
+
+\92\1^\d{0,3,5}\n{9c}\b{0,2}(\b{,5}){3})\01{}\2{,}\001${0,}
+```
+
+两者其实并不冲突（一个使用了 css 类型 `regex`，而一个是 `lang-regex` / `language-regex`）。你可以选择一个你喜欢的使用。