ソフトウェアやプログラミングのヒントを提供する場合は、いくつかのコードスニペットを共有することをお勧めします。 コードスニペットを共有するこの方法は、プラクティスをすばやく設定するのに役立ちます。 ただし、デフォルトでは、必要なすべてのフォーマットでコードを共有することはできません。 フォーマットとは、構文の強調表示です。 それでも、それは非常に簡単なことです。
幸いなことに、divi を使用している場合は、これらのコード スニペットにカスタム スタイルを追加するために、これを手動で行う組み込みの方法があることを知っておく必要があります。 さらに、プラグインもあり、 ressources Divi で美しく機能的なスニペットを作成するプロセスを非常に簡素化できるサードパーティ アプリ。
このチュートリアルでは、Diviでコードスニペットを（手動で）共有する方法を紹介します。 また、Divi Builderを使用してスニペットブロックを設計する方法も示します。これにより、次のレベルに進むことができます。
概要
このチュートリアルで可能なスニペットデザインの概要は次のとおりです。
コードスニペットを含むコードスニペットボックスに手動モードが追加されました。
チュートリアルの前提条件
このチュートリアルで必要なのは、 Diviテーマ、インストール済みでアクティブです。 新しいページで Divi Builder を使用して、サンプル コード スニペットをゼロから作成します。
開始するには、新しいページを作成し、パブリックインターフェイスにDiviBuilderをデプロイします。 次に、[最初から作成]オプションを選択します。
これで準備完了です！
Diviのコードスニペット用にパーソナライズされたボックスの設計
コードスニペットはテキストモジュールに存在するため、diviビルダーを使用してデザイン要素をテキストモジュール（およびその周辺）に追加できます。 この設計では、要約モジュールを使用してスニペットのラベルとして機能します。 次に、テキストモジュールの左側にカーソルをスタイル設定して配置します。 次に、スニペットのテキストモジュールのスタイルを設定します。
セクション、行、および列の作成
最初に列の行を持つ新しいセクションを作成する必要があります。
次に、ラインパラメータを次のように更新します。
側溝幅：1
カスタムパディング：上部に0px、下部に0px
テキストモジュールを追加する
次に、行にテキストモジュールを追加します。
残すことができます コンテンツ デフォルトでは。 後で WordPress コード スニペットを追加します。 ここでは、次のテキスト パラメーターを更新してテキスト モジュールをモデル化しましょう。
背景色：＃eff0f1テキスト色：＃000000カスタムマージン：左60pxカスタムパディング：上3％、下3％、左3％、右3％
上枠幅：10px上枠色：＃7cda24
スニペットラベルの作成
スニペットラベルを作成するには、blurbモジュールを使用します。 これにより、表示されたコード言語の横にぼかしテキストアイコン（またはカスタム画像アイコン）を追加できます。
プレゼンテーションモジュールを作成し、テキストモジュールの上にドラッグします。 次に、次のプレゼンテーション設定を更新します。
タイトル：cssコンテンツ：[架空のコンテンツを削除]アイコンを使用：はいアイコン：スクリーンショットを参照
次に、設計パラメーターを次のように更新します。
背景色：＃1b2426アイコンの色：＃7cda24画像/アイコンの場所：左フォントサイズ：20pxテキストタイトルの色：#ffffffテキストサイズタイトル：16px
タイトル行の高さ：1.3em幅：100pxカスタムマージン：-44px下、-50px左カスタムパディング：10px上、2px下、15px左、15px右
セクションを複製して、より多くのスニペットボックスデザインを作成します
これは、最初のコードボックスの設計をサポートします。 ここで、コードブロックのデザインを含むセクションを複製し、ラベルと色を更新して、別のエンコーディング言語用の新しいコードブロックを作成する必要があります。 これはもちろんオプションですが、ページに異なるスニペットを追加する場合は、それぞれに異なるカラースキームを設定すると便利です。
たとえば、セクションを複製し、Blurbモジュールの設定を開きます。
Javascriptのタイトルを「js」に更新します。
次に、[画像/アイコンの色]を右クリックして、[検索と置換]を選択します。
更新された検索および置換オプション：
で：このセクション置換：[新しい色]すべて置換：チェックすべての値を置換が見つかりました
これで、JSスニペット用の新しいスニペットブロックができました。
これは、WordPressの一般的なコードタイプのスニペットボックスの例です。
手動コードスニペットに構文の強調表示を追加するためのPrettify Codeプラグインの使用
確かに、手動の方法を使用すると、すぐにテキストを貼り付けて渡すことができます。 インクルード Prettify Codeプラグイン ハイライトされたコードをすべての「pre」タグに即座に追加します。 このプラグインの利点は、カスタマイズがまったく必要ないことです。 プラグインをダウンロードしてアクティブ化するだけです。
Active Prettify Codeを使用した場合のコードの例を次に示します。
コードプリティが来る デグーグル また、これらのすばらしいスニペットをすべて定型化するためにも使用されます stackoverflow.com.
終了するには
Diviでコードスニペットを表示するのは難しいことではありません。 WordPressが提供するpreタグとWordコードタグを使用してスニペットを手動で追加すると、ほとんどの非htmlスニペットで機能しますが、最初にエンコーダーを介してスニペットを実行する必要があります。確かにhtml。 さらに、テキストモジュールの設定を使用して、スニペットのテキストスタイルをさらにカスタマイズできます。 また、手動スニペットにハイライトを追加するには、CodePrettifyを忘れないでください。
定期的にスニペットを共有している人にとっては、SyntaxHighlighterプラグインを使用するのがおそらく最善の策です。 いずれの場合も、DiviBuilderを使用してスニペットにクリエイティブなデザインを追加するオプションが常にあります。
ボンヌチャンス。
