- 1. 全角文字を強調表示
- 2. prism.js をいじる
- 3. スタイルシートの記述
- 4. 結果
1. 全角文字を強調表示
こんなことをやっているのは、本サイトのみだとは思いますが。
コードの説明をするのに全角文字を使っていて、全角文字を強調表示させたいのです。
（結局これは、2026年6月3日にやめちゃいました）
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"];
に 1行追加します。
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行目の一文です。
ただし、これはすべての全角文字がクォートできているか未確定なのでご注意ください。
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;
}
強調表示させることができます。
（も～やめちゃってるので、他のページでは、こんななりませんよ）
|
