---
title: RegEx 高亮着色
configurations:
  regex.highlight: 'true'
---

<a href="javascript:history.go(-1)">< Back</a>

[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`）。你可以选择一个你喜欢的使用。