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

Question

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

例如 shell/bash
也许在一首诗的极端情况下，我想在其中显示单词 "love" bold

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

    ├── 来源
    │ ├── 应用
    │ │ ├── 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.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 and matches up with styles in the predefined stylesheet:

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

什么

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

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

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

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

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

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

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

如果令牌类型以 lang- 开头，而不是生成 <span class="lang-css-kw">...</span>，prettify 将为文件扩展名 css-kw 寻找语言处理程序并将其递归应用于内容在第 1 组中。这个特性在这里可能有点矫枉过正，因为现代 JS 引擎一直支持前瞻，但这是必要的，以便 HTML 模式可以递归地将 JS 和 CSS 模式应用于 [=29= 的内容] 和 <style> 块。

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"

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

像

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

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

在你的规则中。

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

What is the state of the art approach for creating own rules for Google's Prettify?

javascript

typescript

syntax-highlighting

prettify

google-code-prettify