Easy Syntax Highlighter (WordPressプラグイン)

最新のHighlight.jsエンジンで動作する、WordPress向けのモダンで軽量なシンタックスハイライト。

このプラグインは、コードスニペットを高速かつ正確に表示する方法を提供します。20以上の言語をサポートし、80以上のビジュアルテーマを含み、Gutenbergとクラシックエディターの両方にシームレスに統合されます。

✨ 主な機能

• ⚡ モダンなエンジン: 高性能なシンタックスハイライトを実現するため、最新のHighlight.jsライブラリを採用しています。
• 80以上のテーマ: 多数のライトテーマとダークテーマ（Monokai、Dracula、VS Code、GitHubなど）を含む豊富なライブラリを搭載し、すべてローカルに保存されているためオフライン環境でも互換性があります。
• ️ ビジュアルインターフェース: テーマのプレビューと選択を容易にする、クリーンでグリッドベースの管理インターフェースを備えています。
• エディター統合:
• Gutenberg: WordPressネイティブの「コード」ブロックと自動的に連携します。
• クラシックエディター: コードの簡単な挿入のためのTinyMCEボタンを含みます。
• スマートコピー: ユーザーはコードブロックをダブルクリックするだけで、内容をクリップボードに即座にコピーできます（ローカライズされたフィードバック付き）。
• パフォーマンス最優先: アセットはスマートローディングを採用しており、スクリプトとスタイルは実際にコードブロックが存在するページでのみ読み込まれます。
• 安全でアクセシブル: 適切な入力検証、出力エスケープ、およびアクセシビリティのためのARIAラベルを備えて構築されています。

必要条件

インストール

1. プラグインファイルをダウンロードします。
2. FTPで easy-syntax-highlighter フォルダをサーバーにアップロードします: /wp-content/plugins/。
3. WordPressにログインし、プラグイン に移動します。
4. Easy Syntax Highlighter を見つけ、有効化 をクリックします。
5. 設定 → Syntax Highlighter で設定を行います。

⚙️ 設定

設定 → Syntax Highlighter に移動してプラグインをカスタマイズします。

1. テーマの選択

80種類以上のカラーテーマから選択できます。設定ページではビジュアルグリッドレイアウトとライブプレビューが提供され、保存前にコードがどのように表示されるかを正確に確認できます。

2. 一般設定

• 言語サポート: 自動言語検出を有効にするか、特定の言語を強制します。
• コピー機能: 「ダブルクリックでコピー」機能の切り替え（デフォルトで有効）。
• パフォーマンス: アセットの読み込みとキャッシュの動作を設定して、サイトを高速に保ちます。

使い方

Gutenbergブロックエディターで（推奨）

このプラグインは、WordPressのネイティブな体験を向上させるために設計されています。

1. + ボタンをクリックし、標準の コード ブロックを追加します。
2. コードスニペットをブロックに貼り付けます。
3. 公開！ プラグインが自動的に言語を検出し、フロントエンドでハイライト表示します。

上級：言語の強制
特定のスニペットで自動検出が正確でない場合、手動で言語を定義できます：

1. コードブロックを選択します。
2. ツールバーの三点メニュー（⋮）をクリックし、HTMLとして編集を選択します。
3. コードタグに言語クラスを追加します：<code class="language-python">。
4. ビジュアル編集を選択して標準ビューに戻ります。

クラシックエディターの場合

1. エディターツールバーのコードアイコン（TinyMCEボタン）を探します。
2. ボタンをクリックして挿入モーダルを開きます。
3. コードを貼り付け、ドロップダウンから希望の言語を選択し、挿入をクリックします。

トラブルシューティング

問題が発生した場合は、以下の解決策を確認してください：

ライセンス & 貢献

ライセンス
GNU General Public License v2.0 以降の下でライセンスされています。

貢献について
コミュニティからの貢献を歓迎します！

1. リポジトリをフォークします。
2. 機能ブランチを作成します。
3. 変更内容を明確に記述したプルリクエストを提出します。

WordPressコミュニティのために ❤️ を込めて作成