7

highlight.jsの言語定義を作成しようとしています。しかし、うまくいきません。例があります。

この例では、JSON と同じカスタム"aaa"言語を作成しようとしています。registerLanguagefunction は、(highlight.js ソースからの) デフォルトの JSON ハイライト関数と同じ関数を受け取ります。

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>

4

1 に答える 1

3

Highlight.js には、ビルド中に、言語定義オブジェクトのフィールドの名前を変更する縮小/圧縮プロセスがあります。つまり、http://highlightjs.readthedocs.org/en/latest/language-guide.htmlで説明されているオブジェクトは、分散ライブラリでは機能しません。ビルド前に定義された言語のみがこの方法で機能します。

縮小された highlightjs ファイルを調べて、registerLanguage の使用法を調べて、フィールドの名前をリバース エンジニアリングすることができます。

于 2015-10-22T10:04:24.977 に答える