WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

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

公開日:2018(平成30)年6月7日/最終更新日:

,
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」|Knowledge Base

どうですか??私の場合は単純にpreタグで囲んでSimplicity2のカスタマイザー設定のみで表示していたのでプラグインを有効にして簡単な設定をしただけでこのような表示ができるようになりました(至って簡単でした)

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

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

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

翻訳ファイルは

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

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

QA AnalyticsQA Analytics

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

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

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

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

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

General

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

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

Appearance

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

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

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

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

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

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

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

テストした環境

  1. WordPressのバージョン:4.9.6
  2. PHPのバージョン:7.0
  3. テーマ:Simplicity2 バージョン2.3.0g
  4. プラグインのバージョン:1.3.9
  • テストサーバー:カラフルボックス ColorfulBox
  • WordPressのバージョン:4.9.6
  • PHPのバージョン:7.0
  • テーマ:Simplicity2 バージョン2.3.0g
  • プラグインのバージョン:本記事で紹介しているバージョン  1.3.9/最新バージョン 公式サイトで “mivhak” は配布されていません
  • 公式サイト(wordpress.org上):
  • 公式サイト(作者サイト):

このプラグインの最新バージョンは公式サイトで “mivhak” は配布されていませんです。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

  1. 設定のしやすさ:★★★★★
  2. 使いやすさ:★★★★★
  3. おすすめ度:★★★★★
著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)