highlight.jsの言語定義を作成しようとしています。しかし、うまくいきません。例があります。
この例では、JSON と同じカスタム"aaa"言語を作成しようとしています。registerLanguage
function は、(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>