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



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タグで囲んでSimplicity2のカスタマイザー設定のみで表示していたのでプラグインを有効にして簡単な設定をしただけでこのような表示ができるようになりました(至って簡単でした)

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

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

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

翻訳ファイルは

Wordpressプラグイン【Mivhak Syntax Highlighter】の日本語翻訳ファイルのダウンロードページです。

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

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

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

インストールと設定方法

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

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

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【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. このプラグインの最新バージョンは1.3.9です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

    個人的な評価・感想ほか

      5段階評価

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

    Wordpressの本

    Amazonの人気商品楽天市場の人気商品
    CS Shop
    小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

    小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

    2,894 円 (税込) 送料込
    <p>【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】<..
    Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

    Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

    2,570 円 (税込) 送料込
    あらゆるビジネスサイトで使える企画・設計・制作・運 田中勇輔 翔泳社ウェブ タントウシャ ノ タメノ ワードプレス ガ ワカル ホン タナカ,ユウスケ 発行年月:2015年09月15日 ページ数:287p サイズ:単行本 ISBN:9784798142708 田中勇輔(タナカユウスケ) Webディレク..
    楽天ウェブサービスセンター CS Shop

    プラグインに関するお問い合わせ

    「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

    ココナラ Wordpress プラグイン探し バナー

    似たようなプラグインをお探しですか?

    このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
    トップへ戻る