RegEx 高亮着色

< Back

ph-Bookshelf 通过 JavaScript 库其实是自己写的脚本 regex-colorizer 支持了对正则表达式 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 类型即可使用:

像是 `^[0-9a-z]+这样子$`{.regex} 即可。

{.regex}
```
^或者对于代码块而言\.+$
```

<code class=regex>或者\.\.\. HTML 方式[\.\?]?</code>

像是 ^[0-9a-z]+这样子$ 即可。

^或者对于代码块而言\.+$

或者... HTML 方式[.?]?


Prism 的代码高亮

其实 Prism 的代码高亮也可以高亮着色 RegEx。尽管两者的高亮样式还挺不一样的。

以下是使用 Prism 的 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)。你可以选择一个你喜欢的使用。