強調表示されたコードスニペットをWordPressサイトに表示する方法

ほぼすべてのテクノロジーブロガー、コンテンツクリエーター、または開発者は、ブログに強調表示されたコードスニペットを表示する必要がある場合があります。 それ自体が頭痛の種になる可能性があります。 ただし、そのスニペット内の1つまたは複数の行を強調表示することも必要になる可能性があり、残念ながら、その機能はほとんどのコード埋め込みの一部ではありません。 幸い、SyntaxHighlighterEvolvedプラグインが存在します。 これを使用して、コードを可能な限りクリーンで読みやすくする方法を紹介します。

私たちのYoutubeチャンネルを購読する

SyntaxHighlighter Evolved

プラグインのインストールとアクティブ化は簡単です。 WP.orgプラグインリポジトリで見つけることができますが、 Alex Mills（Viper007Bond）によって行われるようにしてください。 名前や機能が似ているプラ​​グインはたくさんありますが、これは信頼性が高く、最新の状態に保たれています。 さらに、これにはグーテンベルクエディター専用のブロックが付属しています。 この種のタスクに選択できるように、エクスペリエンスをカスタマイズできる多くのパラメーターは言うまでもありません。

WordPressダッシュボードの[設定]メニューの下に、 SyntaxHighlighterというラベルの付いた新しいアイテムがあります。 先に進んで、それをクリックしてください。 そこで、WordPressサイトにコードスニペットを埋め込むために必要なあらゆる小さなことを調整できます。

SyntaxHighlighter設定

プラグインの設定ページは比較的簡単です。 このプラグインについて私たちが気に入っている特定の要素の1つは、サイトでのコードの表示方法に関して多くのカスタマイズができることです。 CSSクラスを埋め込みに追加したり、行番号のパディングを調整したり、色のテーマを選択したり、スマートタブとワードラップを使用したり、サイト全体のスケールで個々のコーディング言語の強調表示を読み込む方法を決定したりできます。

ほとんどの人が知っておくべきだと思う3つの特定の設定を呼び出したいと思います。

プラグインのバージョン、行番号、タブサイズ

1つ目は、ロードするプラグインのバージョンです。 プラグイン自体はリポジトリ上で更新され続けますが、コードを最適に表示する方法に応じて、プラグインのバージョン2.xと3.xのどちらかを選択できます。 どちらも安全ですが、それぞれが他方が提供していない特定の機能を提供します（少なくともこの記事の執筆時点では）。

コードをコピーするユーザーが最も重要な場合は、バージョン3.xで問題ありません。 ただし、実際のユーティリティよりも表示に適している場合は、バージョン2.xのワードラップが、大きなコードスニペットでのスクロールバーの必要性を回避するため、より適している可能性があります。

次に、行番号を表示するかどうかを決定します。 大きなコードやチュートリアルの場合、行番号は非常に重要です。 ただし、短いスニペットがある場合は、1行目と2行目として継続的にラベルを付ける必要はありません。これらを削除すると、コードの外観が大幅にクリーンアップされます。

そして、物議を醸しているタブサイズがあります。 このオプションのデフォルトは4ですが、任意の数に変更できます。 正しい値2を含めます（はい、正しい値がないことを認識しています。タブ用に2つのスペースが好きです。）

あなたのコードとショートコード

[設定]ページの一番下までスクロールすると、大きなコードプレビューと、多数のショートコードパラメーターが表示されます。 コードスニペットを強調表示するためにすべてのプラグインが何を実行できるかを確認するためだけに、それらを調べるのに時間がかかります。 さらに、上記の設定でコードがどのように表示されるかについて上記で行った変更は、ここに反映されます。 したがって、オプションを変更した後は、必ず[保存]をクリックしてください。

特定のプラグインに結び付けることができるため、ショートコードの最大のファンではない人もいますが、これらはスマートで覚えやすいため、使用する価値があると考えています。 他に何もない場合は、2つのことを覚えておく必要があります。そうすれば、プラグインは最高のパフォーマンスを発揮します。

• また

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  、フォーマットされて強調表示されます。

  ショートコードの使用

  ショートコードをレンダリングできる場所ならどこでも、これらを使用できます。 Diviまたはクラシックエディターでは、テキストモジュールまたはTinyMCEエディターを使用して、ショートコードの間にコードを貼り付けることができます。 [ビジュアル]タブの仕組みのため、特殊文字の書式を維持するためにこれらの[テキスト]タブを使用することをお勧めします。

  

  グーテンベルク/ブロックエディターのユーザーであれば、物事は同じように簡単です。 繰り返しになりますが、これにはTextブロックを使用できます。 それよりもさらに簡単なのは、カスタムHTMLブロックです。 上記のように、ショートコードタグ内にコードを貼り付けます。

  

  ただし、それよりもさらに優れているのは、SyntaxHighlighterEvolvedブロック自体です。 プラグインのインストールには独自のGutenbergブロックが含まれているため、ショートコードを使用しておらず、パラメーターをいじりたくない場合は、その必要はありません。 [書式設定]でブロックを見つけて、投稿またはページに挿入するだけです。

  

  コードの挿入方法に関係なく、WordPressサイトのフロントエンドに同じレンダリングが表示されます。

  

  仕上げ

  コードスニペットを聴衆に提示する必要がある理由はたくさんあります。 チュートリアルを書いたり、一般の人々が必要に応じて使用できる一般的な問題の修正を投稿したりするかもしれません。 ただし、GitHubの埋め込みでは、ユーザーが望む正確な種類のエクスペリエンスが提供されない場合があります。 そのとき、SyntaxHighlighterEvolvedのようなプラグインが必要になります。 数回クリックし、少しカスタマイズし、グーテンベルクブロックまたはショートコードを使用するだけで、オーディエンスは問題なくコードをウォークスルーできます。

  このようなコードを強調するために、サイトでどのような用途を見つけることができますか？

  Adil Bouyghajden /shutterstock.comによる記事特集画像