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|pkg)\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|pkg|setup-xorg-base)\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.element)
    {
      // 基準となる env.code の先頭に改行コードがある場合のみ作戦を起動
      if (/^(\r?\n)/.test(env.code))
      {
        // 1. 【文字列側の粛清】Prismのハイライト計算用文字列から先頭の改行を消去
        env.code = env.code.replace(/^(\r?\n)/, '');

        // 2. 【DOM側の粛清】Keep Markupのスキャン対象となるDOMからも先頭の改行を消去
        var firstNode = env.element.firstChild;

        if (firstNode && firstNode.nodeType === 3)
        {
          if (/^(\r?\n)/.test(firstNode.nodeValue))
          {
            firstNode.nodeValue = firstNode.nodeValue.replace(/^(\r?\n)/, '');
          }
        }
        // これにより、両者のインデックス（文字位置）が「0番目＝a」で完全に一致します
      }
    }
  });
}


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

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

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

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


npm run build


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

3.　参考サイト

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