Highlight.js 自定义语言定义

Question

我正在尝试为highlight.js创建语言定义。但它不起作用。我有一个例子。

在这个例子中，我试图创建与 JSON 相同的自定义“aaa”语言。registerLanguage函数接收与默认 JSON 高亮函数相同的函数（来自 highlight.js 源）。

hljs.listLanguages() 显示，该语言已注册。

之后，我打电话给hljs.highlightBlock(block)。

<code class="aaa">强制使用自定义“aaa”语言，在这种情况下hljs.highlightBlock(block)不会更改内容。

$(document).ready(function() {
  // registering aaa language (JSON alias)
  // code from https://github.com/isagalaev/highlight.js/blob/master/src/languages/json.js
  hljs.registerLanguage("aaa", function(hljs) {
    var LITERALS = {
      literal: 'true false null'
    };
    var TYPES = [
      hljs.QUOTE_STRING_MODE,
      hljs.C_NUMBER_MODE
    ];
    var VALUE_CONTAINER = {
      className: 'value',
      end: ',',
      endsWithParent: true,
      excludeEnd: true,
      contains: TYPES,
      keywords: LITERALS
    };
    var OBJECT = {
      begin: '{',
      end: '}',
      contains: [{
        className: 'attribute',
        begin: '\\s*"',
        end: '"\\s*:\\s*',
        excludeBegin: true,
        excludeEnd: true,
        contains: [hljs.BACKSLASH_ESCAPE],
        illegal: '\\n',
        starts: VALUE_CONTAINER
      }],
      illegal: '\\S'
    };
    var ARRAY = {
      begin: '\\[',
      end: '\\]',
      contains: [hljs.inherit(VALUE_CONTAINER, {
        className: null
      })], // inherit is also a workaround for a bug that makes shared modes with endsWithParent compile only the ending of one of the parents
      illegal: '\\S'
    };
    TYPES.splice(TYPES.length, 0, OBJECT, ARRAY);
    return {
      contains: TYPES,
      keywords: LITERALS,
      illegal: '\\S'
    };
  });
  console.log(hljs.listLanguages()); // aaa in the list
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<pre><code class="aaa"> 
{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}
</code></pre>

Answer 1

Highlight.js 在构建期间有一个缩小/打包过程，该过程会重命名语言定义对象的字段。这意味着他们在http://highlightjs.readthedocs.org/en/latest/language-guide.html中描述的对象将无法与分布式库一起使用。只有在构建之前定义的语言才能以这种方式工作。

您可以在缩小的highlightjs 文件中查找registerLanguage 的用法，以尝试对字段名称进行逆向工程。