61 lines
1.9 KiB
Markdown
61 lines
1.9 KiB
Markdown
---
|
|
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`）。你可以选择一个你喜欢的使用。
|