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. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

WordPressで検索エンジン向けのサイトマップを作成するプラグイン「Google XML Sitemaps」

WordPressでトランプ大統領の言葉をダッシュボードに表示するプラグイン「Hello Trumpy」

WordPressで画面のリフレッシュなしで文章を開いたり閉じたりできるプラグイン「Read More Without Refresh」


【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の人気商品楽天市場の人気商品
    【中古】 WordPressレッスンブック 2.8対応 ステップバイステップ形式でマスターできる /エビスコム【著】 【中古】afb

    【中古】 WordPressレッスンブック 2.8対応 ステップバイステップ形式でマスターできる /エビスコム【著】 【中古】afb

    108 円 (税込)
    エビスコム【著】販売会社/発売会社:ソシム発売年月日:2009/09/18JAN:9784883376735//付属品〜CD−ROM1枚付
    【送料無料】 WordPress標準デザイン講座20LESSONS WordPress5 / Gutenberg対応 / 野村圭 【本】

    【送料無料】 WordPress標準デザイン講座20LESSONS WordPress5 / Gutenberg対応 / 野村圭 【本】

    2,786 円 (税込) 送料込
    基本情報ジャンル建築・理工フォーマット本出版社翔泳社発売日2019年06月ISBN9784798156514発売国日本サイズ・ページ303p 23×19cm関連キーワード 9784798156514 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
    楽天ウェブサービスセンター CS Shop
    ひまあーと(管理人)
    • 記事の作者: ひまあーと(管理人)

    • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
      ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
      ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


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

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

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


    【スポンサーリンク】


    記事の拡散にご協力をお願いします

    閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

    関連情報