为Google Prettify创建自己的规则的最新方法是什么?

时间:2017-11-11 17:05:33

标签: javascript typescript syntax-highlighting prettify google-code-prettify

为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

1 个答案:

答案 0 :(得分:0)

最简单的方法是使用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左括号)是一个字符串文字,因为它没有预定义的常量。如果您定义自己的令牌类型类,则可能必须在任何页面加载中为它们定义样式规则。

右侧的字符串'('被视为字符列表,因此当输入文本以其中一个字符开头时,此规则是唯一适用的规则。这是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>,则美化将寻找文件扩展名css-kw的语言处理程序,并递归地应用于组中的内容1.由于现代JS引擎始终支持前瞻,因此这个功能可能有点过分,但是必须使HTML模式可以递归地将JS和CSS模式应用于<script><style>块的内容。 / p>

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结尾的标识符

在你的规则中。