HTML - シンタックスハイライト - prism.js - 拡張

1.　概要

2.　設定

3.　参考サイト

1.　概要

　「prism.js」には、「tcsh」の言語設定がないのです。
　キーワードとして追加したいワードもあるのです。
　以前は、「prism.js」自体をゴリゴリ書き換えていたのですが、「Gemini」伍長に相談したら、あとから拡張できるそうです。

2.　設定

　サイト全体で、使用している「JavaScript」のコード内に記述します。
　わたしの環境は、「Laravel」で「Vue.js」を使用しているので。


resources/js/app.js


　に例えば、下記を追加します。


if (typeof Prism !== 'undefined')
{
    // 1. tcsh を bash ベースで自動生成（クローン）
    if (Prism.languages.bash && !Prism.languages.tcsh) {
        Prism.languages.tcsh = Prism.languages.extend('bash', {});

        Prism.languages.insertBefore('tcsh', 'keyword', {
            'tcsh-commands': {
                pattern: /\b(?:setenv|unsetenv|bindkey|source|rehash|apk|alloc)\b/,
                alias: 'keyword'
            }
        });
    }

    // 2. 既存の bash 自体にも追加したいコマンドがある場合
    if (Prism.languages.bash) {
        Prism.languages.insertBefore('bash', 'keyword', {
            'bash-custom-commands': {
                pattern: /\b(?:mycustomcmd|another-command|apk|git-deploy)\b/,
                alias: 'keyword'
            }
        });
    }

    // 3. Normalize Whitespace の設定を上書き（スペース保護）
    if (Prism.plugins && Prism.plugins.NormalizeWhitespace) {
        Prism.plugins.NormalizeWhitespace.setDefaults({
            'remove-trailing': false,
            'remove-indent': false,
            'left-trim': false,
            'right-trim': false
        });
    }

    // 4. 先頭の最初の空行を消去するフックを登録
    Prism.hooks.add('before-sanity-check', function (env) {
        if (env.code) {
            env.code = env.code.replace(/^(\r?\n)/, '');
        }
    });
}


　4～13行が、「bash」を基に「tcsh」の言語設定を追加しています。
　これにより「language-tcsh」がハイライトします。
　9行目は、「tcsh」独自のキーワードを追加しています。

　16～23行は、「bash」のキーワードとして定義されていないけれども、キーワードとして追加したいものを定義しています。

　25行目以降の処理は、前ページまでの内容なので、ここでは割愛します。

　先に述べた環境故、プロジェクトディレクトリで。


npm run build


　これで、コンテンツにアクセスすると、先頭の改行はなくなります。

3.　参考サイト

　本ページは、「Gemini」伍長を参考にさせていただきました。