javascript - 为 Google 的 Prettify 创建自己的规则的最先进方法是什么？

Question

为 Google 的 Prettify 创建自己的规则的最先进方法是什么？

我不是在说改变现有规则的颜色，而且，我想创建新规则:

• 例如 shell/bash
• 也许在一首诗的极端情况下，我想把所有出现的“爱”这个词都加粗

或者我想显示一棵树并将所有 spec.ts 文件标记为粗体，例如:

    ├── src    │   ├── app    │   │   ├── app-routing.module.ts    │   │   ├── app.component.css    │   │   ├── app.component.css.map    │   │   ├── app.component.html    │   │   ├── app.component.scss    │   │   ├── app.component.spec.ts    │   │   ├── app.component.ts    │   │   ├── app.module.ts    │   │   └── lesson    │   │       ├── lesson.component.css    │   │       ├── lesson.component.css.map    │   │       ├── lesson.component.html    │   │       ├── lesson.component.scss    │   │       ├── lesson.component.spec.ts    │   │       └── lesson.component.ts

Answer 1

最简单的方法是从 existing example 开始工作.

如果您查看该文件，您会发现它有一些围绕两个元组列表的样板:

PR['registerLangHandler'](
    PR['createSimpleLexer'](
        [
          // Some tuples
        ],
        [
          // Some more tuples
        ],
        [/* Some file extensions without dot */]));

如果文件扩展名列表包含"ext"并要求美化使用 class="lang-ext ..." 美化代码块然后将使用此处理程序。

两组元组具有相似的结构。这是第一组的一些

['opn',             /^\(+/, null, '('],
['clo',             /^\)+/, null, ')'],

这是第二组中的一个。

[PR['PR_KEYWORD'],     /^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|...)\b/, null],

PR['PR_KEYWORD']是 predefined token type并与 predefined stylesheet 中的样式匹配:

.kwd { color: #008 }  /* a keyword */

什么

['opn',             /^\(+/, null, '('],

说的是美化的时候，如果代码开头以/^\(+/开头, 然后输入被包装在 <span class="opn">...</span> 中. opn (LISP 左括号) 是一个字符串文字，因为它没有预定义的常量。如果您定义自己的 token 类型类，您可能必须在任何页面加载美化时为它们定义样式规则。

右边的字符串，'(' , 被视为字符列表，因此当输入文本以这些字符之一开头时，此规则是唯一适用的规则。这是过去几年对 IE 6 的重要优化。

两组元组之间的唯一区别是第一个列表中的元组具有这个额外的排他性字符元素。

IIRC，null支持一项被发现很少需要且不再受支持的功能。您在该位置输入的任何值都将被忽略。

CSS handler 有一些关于所有这些的文档，并演示了另一个功能。

['lang-css-kw', /^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],

如果 token 类型以lang-开头，而不是生成 <span class="lang-css-kw">...</span> , prettify 将寻找文件扩展名的语言处理程序 css-kw并将其递归应用于组 1 中的内容。由于现代 JS 引擎始终支持先行，因此此功能在这里可能有点矫枉过正，但这是必要的，以便 HTML 模式可以递归地将 JS 和 CSS 模式应用于 <script> 的内容。和 <style> block 。

---

Prettify 可以处理任何仅依赖于从左到右传递标记的转换。它无法在边表中收集符号以消除歧义，因此无法区分这两个 C 代码片段:

typedef int t  // t is declared as a type
t* x;   // declare x as a pointer to a t. "t" should have class="typ"

来自

int t = 1;  // t is declared as a variable, not a type
t* x;   // multiplication.  "t" should not have class="typ"

面对您经常在 stackoverflow 等网站上看到的小代码片段和格式错误的代码，这种有限的方法似乎更加稳健。

像这样编码通用语言约定是合理的

• 输入以大写字母开头的名字
• 以 _t 结尾的标识符是类型

在你的规则中。