From 1e56cbb6342caa770b2df6dcc84d66b6bee0b06f Mon Sep 17 00:00:00 2001
From: Eyre_S <sukazyo@outlook.com>
Date: Mon, 27 Mar 2023 23:48:35 +0800
Subject: [PATCH] add regex highlight intro

---
 book.xml                 |  5 ++--
 tools/regex-highlight.md | 58 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 tools/regex-highlight.md

diff --git a/book.xml b/book.xml
index 95de33e..ee0164d 100644
--- a/book.xml
+++ b/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>
 		
diff --git a/tools/regex-highlight.md b/tools/regex-highlight.md
new file mode 100644
index 0000000..a584999
--- /dev/null
+++ b/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`）。你可以选择一个你喜欢的使用。