Highlight.js自定义语言定义

Question

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

在本例中，我试图创建自定义的"aaa“语言，它与JSON相同。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中描述的对象不能用于分布式库。只有在构建时之前定义的语言才会这样工作。

您可以在缩小的荧光try文件中查找registerLanguage的用法，以尝试并反向工程字段的名称。