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対策が得意なホームぺージ制作会社エクセレント

筒井 章年

Web制作歴25年。1,000サイト以上のWeb集客のサポート経験を持つ。 その経験で得た知識や経験でWeb集客の立案やコンサルティングを担当しています。集客問題を解決できるノウハウをわかりやすくご紹介いたします!

関連記事

Instagram位置情報設定代行サービス 場所を追加
Instagram位置情報設定方法 説明書
最近の記事 おすすめ記事
  1. Instagramマーケティングの秘訣は女性フォロワーを引きつけてエンゲージメントを高める事

  2. リールを制する者はInstagramを制す  2025年のアルゴリズムを大胆予想

  3. Instagramでは「売り込み」は厳禁! 情報・意見・日常 だけの発信がBESTなんです

  4. 企業はなぜInstagramを運用しなければならないのか?2024年最新版

  5. これ知らなきゃヤバイ!【最新】Z世代の消費行動における情報収集方法について具体的に解説します

  6. SNSとホームページでは消費者はどのように情報源として利用しているのか?

  7. 【2024年版】消費者は商品やサービスを選ぶ手順 | 購買決定に影響を与える基礎知識

  8. サラリーマン向け飲食店がInstagramを初めて運用する時の1ヶ月目のロードマップ

  9. MEOとは?SEOと何が違うのか?Google mapに掲載する際に自社の店舗情報を検索結果の上位表示させる基礎知識

  10. 成功事例で学ぶ!ローカルSEOを強化して売上を伸ばしたビジネスのリアルストーリー

  1. SEO対策のWordPress設定完全マニュアル!5つの必須ステップでGoogle検索を制覇

  2. Instagram(インスタグラム)のリール動画の音源を保存して活用する方法

  3. Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

  4. Instagram(インスタグラム)で集客を始める時に知っておくべき集客のコツ12選

  5. 検索意図とは?SEO対策で重要な調べ方と考え方を解説します。

  6. ホームページが検索結果に表示されない時の原因と対処方法を徹底解説!

  7. 【2022年版】Web集客の種類とその方法を集客にお困りのあなたに分かりやすく解説します

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

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

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

資料を無料ダウンロード

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

TOP