preタグなどのデザインを上書きして本文内のコードをきれいに表示するプラグイン「Mivhak Syntax Highlighter」

公開日: 更新日: その他 デザイン
Knowledge Base Wordpress プラグイン




Wordpressの記事本文でソースコードなどを紹介するときにはPRE(Preformatted Text)/code/XMLHttpRequest (XHR)といったタグで囲んで「ここはソースコードですよ」という表示をしますよね?

そのとき、このタグで囲まれた部分はテーマのCSSなどを通じて表示されます。そしてテーマによっては簡易的な表現のものがあったり、凝った表現ができるものもあります。

このサイトで使っているSimplicity2(この記事を公開時に使用)はちょうど中間的な感じで、特定のタグで囲まれたものにデザイン要素を加えて表示されるようになっていました。

でもちょっと問題というか不都合が発生!!それは、preタグで囲まれたものをドラッグアンドドロップでコピーすると改行がきちんと貼り付け先で適用されないときがあるということ(プログラムで「〇〇なときがある」というのはおかしい表現かもしれませんがこれホント)です。コードは改行が適切に行わないと動作しない場合もあるので紹介する側としては100%きっちり使えるようにしておきたいと思いました。

そうなると専用のプラグインを使って挿入し直し?すごい作業・・・としり込みしていた中見つけたのが今回紹介する【Mivhak Syntax Highlighter】。

【Mivhak Syntax Highlighter】はこのプラグインで置き換えるタグを選択することで、例えばpreタグで囲まれたものを適用すれば、今挿入されているpreタグで囲んだコードをこのプラグインの設定で上書きしてくれるという優れものプラグインです。

しかも、このプラグインは高機能なハイライト表示系のプラグインにある「コピー」や「コードの折り返し表示」のボタンがあり、テーマ標準にはない機能も備わっているのが魅力です。

【Mivhak Syntax Highlighter】プラグインの基本的な機能・できること

  1. ソースコードの表示をきれいにする
  2. コピーや折り返し表示用のボタンが表示される
  3. 設定により既存のpreタグなどをプラグイン経由での表現に置き換え

このプラグインを使ってSimplicity2のpreタグを置き換えたのがこの画像です
preタグなどのデザインを上書きして本文内のコードをきれいに表示するプラグイン「Mivhak Syntax Highlighter」
どうですか??私の場合は単純にpreタグで囲んでSimplicity2のカスタマイザー設定のみで表示していたのでプラグインを有効にして簡単な設定をしただけでこのような表示ができるようになりました(至って簡単でした)

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Mivhak Syntax Highlighter】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Mivhak Syntax Highlighter】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Mivhak Syntax Highlighter】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

【Mivhak Syntax Highlighter】プラグインの基本的な使い方

日本語化した前提で紹介します。設定は管理画面のサイドバーメニューに追加される「Mivhak」から行います。

中には2つタグがありますのでそれぞれ設定していきます

  • General
  • どのタグをこのプラグインに適用させるのか?コピーボタンなどを表示するかどうかなどの設定を行います

  • Appearance
  • ハイライト表示されるデザインの設定を行います。あらかじめいくつか備わっているテンプレートを選ぶこともできますし、独自のCSSを書き込むこともできます。

    これだけであらかじめ適用するタグで囲んであるものは一括でデザインが変わります。

    また、ビジュアルエディタではいろいろなデザイン条件などを指定してコード挿入することもできます

    プラグインのテスト環境&個人的評価

    最後に【Mivhak Syntax Highlighter】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

    テストした環境

    1. WordPressのバージョン:4.9.6
    2. PHPのバージョン:7.0
    3. テーマ:Simplicity バージョン2.3.0g
    4. プラグインのバージョン:1.3.9
    5. このプラグインの最新バージョンは現在Wordpress公式サイトに "mivhak" は存在しません(配布されていません)です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

    個人的な評価・感想ほか

      5段階評価

    1. 設定のしやすさ:★★★★★
    2. 使いやすさ:★★★★★
    3. おすすめ度:★★★★★

    Wordpressの本

    Amazonの人気商品楽天市場の人気商品
    CS Shop
    たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

    たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

    1,944 円 (税込) 送料込
    <p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
    サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

    サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

    3,456 円 (税込) 送料込
    <p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
    楽天ウェブサービスセンター CS Shop

    いつでもご相談・サイトカスタマイズの依頼を受け付けています

    Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

    ※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


    【スポンサーリンク】