HTML - シンタックスハイライト - prism.js - カスタマイズ 全角文字を強調表示


 　クラウディア
1.　全角文字を強調表示
2.　prism.js をいじる
3.　スタイルシートの記述
4.　結果 
1.　全角文字を強調表示


　こんなことをやっているのは、本サイトのみだとは思いますが。

　コードの説明をするのに全角文字を使っていて、全角文字を強調表示させたいのです。


2.　prism.js をいじる


　これ、言語ごとにカスタイマイズする方法しか思いついていないところがつらいのですが・・・。

　前項と同様 beautify しておいて

　例えば、C言語の定義だと




Prism.languages.c=Prism.languages.extend("clike",
	{keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|asm|typeof|inline|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|union|unsigned|void|volatile|while)\b/,
	operator:/-[>-]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/]/,
	number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)[ful]*\b/i}),
	Prism.languages.insertBefore("c","string",{macro:{pattern:/(^\s*)#\s*[a-z]+(?:[^\r\n\\]|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,alias:"property",inside:{string:{pattern:/(#\s*include\s*)(?:<.+?>|("|')(?:\\?.)+?\2)/,lookbehind:!0},directive:{pattern:/(#\s*)\b(?:define|defined|elif|else|endif|error|ifdef|ifndef|if|import|include|line|pragma|undef|using)\b/,lookbehind:!0,alias:"keyword"}}},constant:/\b(?:__FILE__|__LINE__|__DATE__|__TIME__|__TIMESTAMP__|__func__|EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|stdin|stdout|stderr)\b/}),delete Prism.languages.c["class-name"],delete Prism.languages.c["boolean"];



　に１行追加します。



Prism.languages.c=Prism.languages.extend("clike",
	{keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|asm|typeof|inline|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|union|unsigned|void|volatile|while)\b/,

	kanji:/[′-※]|[℁-⇿]|[①-⓪]|[■-◯]|[、-㿿]|[一-龠]|[！-￮]/,

	operator:/-[>-]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/]/,
	number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)[ful]*\b/i}),
	Prism.languages.insertBefore("c","string",{macro:{pattern:/(^\s*)#\s*[a-z]+(?:[^\r\n\\]|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,alias:"property",inside:{string:{pattern:/(#\s*include\s*)(?:<.+?>|("|')(?:\\?.)+?\2)/,lookbehind:!0},directive:{pattern:/(#\s*)\b(?:define|defined|elif|else|endif|error|ifdef|ifndef|if|import|include|line|pragma|undef|using)\b/,lookbehind:!0,alias:"keyword"}}},constant:/\b(?:__FILE__|__LINE__|__DATE__|__TIME__|__TIMESTAMP__|__func__|EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|stdin|stdout|stderr)\b/}),delete Prism.languages.c["class-name"],delete Prism.languages.c["boolean"];



　３行目の一文です。
　ただし、これはすべての全角文字がクォートできているか未確定なのでご注意ください。


3.　スタイルシートの記述


　prism.js に全角表示のスタイルを追加します。



.token.kanji
{
	color: #00C000 !important;
    font-weight: bold !important;
	font-family: monospace !important;
}




4.　結果


　そうすると



#include <stdio.h>

int main(int argc, char* argv[])
{
	print("Hello World!");

	return 0;
}



　上記のコードに、漢字べた書きのコメントをいれて



#include <stdio.h>

int main(int argc, char* argv[])
{
	print("Hello World!");			← 漢字べた書きのコメントなのだ

	return 0;
}



　強調表示させることができます。
earthcar（アースカー）