WordPressでソースコードを埋め込むプラグインUrvanov Syntax Highlighterの設定方法

HTMLやCSS、プログラミング言語のブログを書いている方は、ソースコードを記事の中に埋め込みたくなることがありますよね。

そんな時はUrvanov Syntax Highlighterというプラグインがとても便利です!なんと、このプラグイン記事中にソースコードを簡単に埋め込むことができます。

直接記述出来ない文字や記号を文字実態参照に置き換える必要がないので、「HTML」「CSS」「PHP」等を解説する時に使うと便利です。preタグで囲むだけで機能し、ブロックエディターにも対応しているという優れもの。

preタグについてはこちらの記事に詳しく説明しておりますのでご確認下さいませ。

▼参考記事

この記事では、うちのブログでも使用しているUrvanov Syntax Highlighterの設定方法をご紹介させて頂きます。

使い方と設定方法

プラグインの新規追加からUrvanov Syntax Highlighterを検索してダウンロードしましょう。
プラグインを有効化すると、テキスト編集だと管理画面の設定に「Crayon」が追加されます。

・テキスト編集

・ビジュアル編集
テキスト編集だと管理画面の設定に<>が追加されます。

・ブロックエディタ―
ブロックエディターの場合も同様、専用ブロックを追加してコードを貼り付けるだけです。

使い方

テキスト編集の場合

テキスト編集の場合は<pre>タグで囲うだけで機能します。

詳細設定をしたい場合はツールバーに追加されたCrayonをクリックします。

こちらの画面で詳細設定ができます。
タイトル・プログラミング言語を表示させたり、特定の行をハイライトさせることができます。
お好みでカスタマイズが可能です。

編集が完了したら右上の【挿入】ボタンを選択して完了です。

ビジュアル編集の場合

ビジュアル編集の場合はツールバーから<>を選択して詳細画面にて編集してコードを追加します。

このようにUrvanov Syntax Highlighterを使用した部分は背景色がついているので他のテキストと見分けがつかなくなることはありません。
一度挿入したら詳細画面を開かなくてもテキストの編集ができます。

ブロックエディターの場合

ブロック挿入ツールからタグを追加します。

【<>Urvanov Syntax Highlighter】を選択すると先ほど同様、詳細画面が開くので、コードを入力して挿入してください。

クラシックブロックで編集する場合はツールバーにアイコンが追加されているので<>を選択すれば詳細画面が開きます。

基本設定

有効化さえすれば特に設定もせずすぐに使えますが、いちいちフォントサイズを変更するの面倒だったり、サイトに合わせてイメージを変更したい場合はデフォルトの設定を変更することができます。

サイドバーの設定からCrayonを選択すると設定画面が開きます。

テーマやフォントなど設定を変更するとプレヒューに反映されるのでカスタマイズしやすいです。

ツールバーの表示を【常に表示】にすると、マウスオーバーでツールバーが上下するのを防いでくれます。

行の【デフォルトで行を折り返す】にチェックを入れると、画面幅で自動的に折り返されるのでスクロールバーが非表示になります。

※が付いている項目は、ツールバーに表示されるメニューアイコンです。

カスタマイズ

用意されているテーマを更に編集したい場合は、複製をしてさらに細かくカスタマイズが出来ます。

【複製】を選択します。

テーマ名を編集します。
こちらは自由なので自分が管理しやすい名前にしましょう。
名前の変更が終わったら【OK】を選択します。

複製が完了するとテーマのプルダウンに追加されます。

複製したテーマを選択すると【編集】ボタンが選択できるようになります。
こちらを選択して細かいカスタマイズをしていきます。

ダブを切り替えると

  • 名前などの基本情報の変更
  • ハイライトカラーの変更
  • フレームデザインの変更
  • 行デザインの変更
  • 左の数字デザインの変更
  • ツールバーデザインの変更

がカスタマイズ出来ます。

細かくカスタマイズ出来るので自分のサイトにあったデザインに変更してみてください!

まとめ

基本的にはプラグインを有効化してすぐに使えるので簡単です!
更に細かいカスタマイズ機能も備わっているので自分好みのデザインでコードを埋め込みたい方にもおすすめです。

▼該当サービス

ホームぺージレスキューサービス

ホームぺージ更新代行サービス

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

SEO対策が得意なホームぺージ制作会社エクセレント

筒井 章年

1,000サイト以上のWeb集客のサポート経験を持つ。 その経験で得た知識や経験でホームぺージ戦略の立案やマーケティングを担当しています。多くの方に共有させて頂いて、多くの方に成功を実感して頂きたいと考えております。

関連記事

無料相談行っています!!お気軽にご利用ください。
最近の記事 おすすめ記事
  1. 外壁塗装会社がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  2. リフォーム会社がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  3. 外構工事・エクステリア業者がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  4. 歯科医院がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  5. コンテンツマーケティングって何?簡単にその特徴を説明します。

  6. メールマーケティングの現状と効果的な配信方法とは

  7. Web集客方法を業種別にまとめました。成功のポイントや種類など徹底解説!

  8. エクステリア・外構工事業者のWeb集客で利用出来るポータルサイトを紹介します

  9. 歯科医院・歯医者・矯正歯科専用のポータルサイト一覧

  10. 治療院の新規患者の集客にもう悩まない。最新のWeb集客のコツと考え方

  1. Googleにインデックスされない理由とその調査方法を解説します。

  2. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

  3. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

  4. これを見れば完璧!Google Maps API 取得方法をご紹介します。

  5. WordPressで投稿するブログで <br> と <br /> はどちらが正しいの?何が違うのか解説します。

  6. WordPressのブロックエディタを利用してページ編集する方法とその投稿方法

  7. Instagramのリールの音源を保存して活用する方法

  8. 「レンダリングを妨げるリソースの除外」という項目はプラグイン Autoptimize  を使って簡単に解決出来ます

  9. コピペで使える!ビジネスブログ向けのシンプルなCSSで飾る見出しデザイン30選

  10. 「使用していない JavaScript の削減」をプラグイン Flying Scripts でスピード解決する方法 

資料を無料ダウンロード

弊社の会社概要と、ご提供サービスのご紹介資料です。
ご覧いただき、お気軽にお問い合わせください。

TOP