PrismJSでシンタックスハイライトブロック

<?php
/**
 * Lazy Blocks: Highlight Code Block (Self-contained)
 *
 * 設計方針（重要）:
 * - このコードは「Lazy Blocks 内で完全に自己完結」することを最優先とする
 * - functions.php / enqueue_* は一切使用しない
 * - Lazy Blocks が削除された場合、このコードも完全に消える（副作用ゼロ）
 *
 * 注意:
 * - WordPress / Gutenberg には「Editorかどうか」を PHP 側で正確に判定する手段がない
 * - そのため Editor 専用の見た目変更は CSS セレクタで吸収する
 * - is_admin() は JS の実行制御にのみ使用する（CSS分岐には使わない）
 */


// CDN から読み込む Web Components のバージョン固定
// ※ 将来アップデート時は互換性を必ず確認すること
$SYNTAX_HIGHLIGHT_ELEMENT_VER = '1.2.0';
$LINE_NUMBERS_VER = '1.0.3';

// Lazy Blocks attributes
// ユーザー入力は必ず esc_* して出力する（XSS対策）
$code       = isset( $attributes['code'] ) ? $attributes['code'] : '';
$language   = isset( $attributes['language'] ) ? $attributes['language'] : 'html';
$show_lines = isset( $attributes['show_lines'] ) ? $attributes['show_lines'] : false;
?>

<?php if ( $show_lines ) : ?>
  <pre useBlockProps>
    <code>
      <line-numbers obtrusive>
        <syntax-highlight language="<?php echo esc_attr( $language ); ?>"><?php echo esc_html( $code ); ?>
        </syntax-highlight>
      </line-numbers>
    </code>
  </pre>
<?php else : ?>
<pre useBlockProps>
    <code>
  <syntax-highlight language="<?php echo esc_attr( $language ); ?>"><?php echo esc_html( $code ); ?>
  </syntax-highlight>
    </code>
</pre>
<?php endif; ?>


<?php
/**
 * 二重ロード防止フラグ
 *
 * - 同一ページ内にこのブロックが複数配置された場合でも
 *   JS / CSS を一度だけ出力するための仕組み
 * - enqueue_* と同等の役割だが、Lazy Blocks 内完結を優先している
 */
echo '<script type="module">
  if (!window.__ptSyntaxHighlightLoaded) {
    window.__ptSyntaxHighlightLoaded = true;

  /**
   * シンタックスハイライト用テーマCSS
   * - CDN 配信
   * - Lazy Blocks 削除時に完全に消える
   */
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://cdn.jsdelivr.net/npm/syntax-highlight-element@'
      . esc_attr($SYNTAX_HIGHLIGHT_ELEMENT_VER) . '/dist/themes/prettylights.min.css";
    document.head.appendChild(link);

   /**
   * Web Components（Frontend / Editor 共通）
   *
   * - type="module" を使用（ESM）
   */
    import("https://cdn.jsdelivr.net/npm/syntax-highlight-element@'
      . esc_attr($SYNTAX_HIGHLIGHT_ELEMENT_VER) . '/+esm");

    import("https://cdn.jsdelivr.net/npm/@zachleat/line-numbers@'
      . esc_attr($LINE_NUMBERS_VER) . '/+esm");
  }
</script>';
?>


<?php
/**
 * 共通スタイル（Frontend / Editor 両対応）
 *
 * 注意:
 * - Editor 専用スタイルも「常に出力」される
 * - 実際の適用可否は CSS セレクタで制御する
 */
echo '<style>
.wp-block-lazyblock-highlight-code {
  --prettylights-bg: light-dark(#f6f8fa, #151b23);
  --prettylights-comment: light-dark(#59636e, #9198a1);
  color-scheme: light dark;

  /* 行高・フォントサイズは変数で一元管理 */
  --pt_syntax_highlight_code-line-height: 1.6;
  --pt_syntax_highlight_code-font-size: 16px;

}

.wp-block-lazyblock-highlight-code code {
  display: block;
  color: var(--prettylights-comment, #9198a1);
  background-color: var(--prettylights-bg, #151b23);

  border-radius: 0.5rem;
  padding: 1rem;

  line-height: var(--pt_syntax_highlight_code-line-height);
  font-size: var(--pt_syntax_highlight_code-font-size);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
}

/* line-numbers Web Component */
line-numbers:not(:defined),
line-numbers {
  display: flex;
  white-space: pre;
  user-select: none;
}

line-numbers {
  content-visibility: visible;
}

/* Web Component 初期化前の CLS / FOUC 対策 */
line-numbers:not(:defined) {
  content-visibility: auto;
  contain-intrinsic-size: 1px 200px;
}

/* syntax-highlight Web Component */
syntax-highlight:not(:defined),
syntax-highlight {
  display: block;
  min-height: calc(1em * var(--pt_syntax_highlight_code-line-height));
  padding-inline-start: 1rem;
  user-select: text;
}

/* =========================
  Editor preview only
  =========================
  - Frontend には .editor-styles-wrapper が存在しないため影響しない
  - Lazy Blocks の preview DOM (.lzb-preview-server) を前提にしている
*/
.editor-styles-wrapper
.wp-block-lazyblock-highlight-code
.lzb-preview-server
pre code {
  max-height: 10em;
  overflow-y: auto;
}
</style>';
?>