ほぼすべてのブロガー、クリエイターは、 コンテンツ またはテクノロジー開発者は、ブログ上で強調表示されたコードのスニペットを表示する必要がある場合があります。 これ自体が頭痛の種になる可能性があります。 ただし、このスニペット内の XNUMX つ以上の行を強調表示することも必要な場合があります。残念ながら、この機能はほとんどのコード統合の一部ではありません。 幸いなことに、SyntaxHighlighter Evolved プラグインが存在します。 コードをできるだけクリーンで読みやすい状態に保つためにこれを使用する方法を説明します。
SyntaxHighlighter Evolved
プラグインのインストールとアクティベーションは簡単です。 WP.orgプラグインリポジトリで見つけることができます しかし、それがうまく行われていることを確認してください アレックスミルズ（Viper007Bond）、確かに、多くの結果があるからです。 ただし、これは信頼性が高く、最新のものであることを私たちは知っています。 さらに、これにはGutenbergエディター専用のブロックが付属しています。 あなたの経験をパーソナライズすることを可能にする多くのパラメータは言うまでもなく、それはこのタイプのタスクのための私たちの選択になります。
メニューで パラメータ WordPressダッシュボードには、という新しいアイテムがあります SyntaxHighlighter 。 先に進み、それをクリックします。 そこで、スニペットをWordPressサイトに埋め込むために必要なすべての小さなことを調整できます。
構文Highlighter設定
プラグインの設定ページは比較的シンプルです。 このプラグインについて私たちが気に入っている特定の要素の XNUMX つは、サイトでのコードの表示方法に関して多くのカスタマイズができることです。 埋め込みに CSS クラスを追加したり、行番号のパディングを調整したり、 テーマ 色、スマートなタブと改行を使用し、個々のサイト全体のコーディング言語の強調表示の読み込み方法を決定します。
ほとんどの人が知っておくべき3つの特定のパラメーターを定義します。
プラグインのバージョン、行番号、タブサイズ
XNUMXつ目は、ロードするプラグインのバージョンです。 プラグインはリポジトリ内で最新の状態のままですが、 プラグインの2.xバージョンと3.xバージョンを選択できます 、コードの表示方法によって異なります。 どちらも安全ですが、それぞれが（執筆時点で）他方が提供していない特定の機能を提供します。
ユーザーがコードをコピーすることが最も重要な場合は、バージョン3.xで十分です。 ただし、実際のユーティリティよりも表示に便利な場合は、スクロールバーを使用する必要がないため、バージョン2.xのnewlineの方が適している可能性があります。大きなコードスニペットの場合。
次に、行番号を表示するかどうかを指定する必要があります。 コードやチュートリアルの大きなチャンクの場合、行番号は非常に重要です。 ただし、短いスニペットがある場合は、それらを1行目と2行目に恒久的にラベル付けする必要はありません。それらを削除すると、コードの外観を大幅に改善できます。
そして、 タブサイズ まだ物議を醸しています。 デフォルトのオプションは4ですが、任意の数に変更できます。 正しい値2を含みます（はい、正しい値がないことを認識しています。タブ用の2つのスペースが好きです。）
あなたのコードとショートコード
ページの一番下までスクロールすると パラメータ 、大きなコードプレビューと、多数のショートコードパラメータが表示されます。 スニペットを紹介するためにすべてのプラグインが何を実行できるかを確認するためだけに、それらを調べるのに時間を費やすことができます。 また、上記の設定でコード表示に上記で行った変更は、ここに反映されます。 したがって、オプションを変更した後は、必ず[保存]をクリックしてください。
特定のプラグインにリンクできるため、ショートコードの最大のファンではない人もいますが、これらはスマートで覚えやすいため、使用する価値があると考えています。 他に何もない場合は、XNUMXつのことを覚えておく必要があります。そうすれば、プラグインは最適に機能します。
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
またはいくつかのバリエーション。 覚えていれば、このプラグインでできることには自信があります。 長い識別子を使用できますが、SyntaxHighlighterプラグインは作業を簡素化するのに十分に構築されています。
短いコードを使用する
ショートコードをレンダリングできる場所ならどこでも使用できます。 の Divi または従来のエディターの場合、テキスト モジュールまたは TinyMCE エディターを使用して、ショートコードの間にコードを貼り付けるだけです。 [ビジュアル] タブの仕組みにより、タブを使用することをお勧めします テキスト これらのフォーマット特殊文字を保持するため。
Gutenberg / Block Editorのユーザーであれば、物事はとても簡単です。 繰り返しになりますが、これにはテキストブロックを使用できます。 さらに簡単に、カスタムHTMLブロック。 上記のように、コードをshortcodeタグに貼り付けます。
さらに良いことに、SyntaxHighlighterEvolvedブロックはそれ自体です。 プラグインのインストールには、独自のGutenbergブロックが含まれています。 したがって、ショートコードではなく、設定をいじりたくない場合は、そうする必要はありません。 下のブロックを見つけるだけです 書式設定 メッセージまたはページに挿入します。
コードをどのように挿入しても、WordPressサイトのフロントエンドで同じレンダリングが表示されます。
まとめると
多くの理由で、スニペットを視聴者に提示する必要がある場合があります。 たぶん、あなたはチュートリアルを書いたり、聴衆が好きなように取って使うことができる一般的な問題の解決策を投稿したりしますか？ ただし、GitHub統合では、ユーザーに必要な種類のエクスペリエンスが提供されない場合があります。 これは、SyntaxHighlighterEvolvedのようなプラグインが必要な場合です。
数回クリックするだけで、わずかなカスタマイズとGutenbergブロックまたはショートコードを使用して、視聴者は問題なくコードを探索できます。
