WordPressカスタマイズ

【WordPress】ソースコードの紹介に便利なプラグイン「Crayon Syntax Highlighter」を導入!コードを見やすくハイライト表示してくれる!

更新日:

@Mori2ndです。このブログでもHTMLやObjective-Cなどのソースコードを紹介していこうと考えているので、ソースコードをハイライト表示してくれるWordPressプラグイン「Crayon Syntax Highlighter」を導入してみました。

別に運営しているブログでも同じようなプラグインを利用していますが、今回導入したプラグインのほうが見やすくていい感じですね。さっそくご紹介します!

スポンサードリンク

ソースコードの紹介に便利なプラグイン「Crayon Syntax Highlighter」

プラグインの入手方法ですが、WordPress管理画面のプラグインから検索するか、下記のプラグインページからダウンロードすることもできます。

プラグインページからダウンロードした場合は、FTPのソフトでサーバーの「plugins」フォルダ内にアップロードしてください。

Crayon Syntax Highlighter « WordPress Plugins

プラグインを有効化したら、利用開始できます。

好みの表示方法にカスタマイズしよう

デフォルトの設定でもOKなんですが、管理画面からフォントサイズやカラー、ツールバーの表示方法などがカスタマイズできるようになっています。

せっかくなので好みの表示方法に変更です。はじめに変更したのが、ツールバーの表示方法。

デフォルトではマウスカーソルがきたときに、ツールバーが重ねて表示されるようになっています。

これだと画像のように重なった部分が見えなくなってしまうので変更しました。

ツールバーが表示されるときに、コードを押し下げて表示するようにもできますが、マウスの動き次第で画面がグラグラしたように見えて個人的に気持ち悪い。。。

というわけで、ツールーバーは常に表示されるようにしてみました。

これで、ツールバーの機能にもアクセスしやすくなったので気に入ってます。

後は、タグの機能。

個人的には通常のHTMLタグとしても使えるコードを利用したかったので、preタグを利用するようにしました。

下記のようにソースコード部分をタグで囲みますと。
補足:<>は全角にしていますが、実際は半角にします。

<pre class="lang:default decode:true " ></pre>

ソースコードがハイライト表示されます。

投稿画面にボタンが追加。簡単に挿入できる。

投稿画面にも「crayon」ボタンが追加されるので、このボタンからタグを挿入することもできます。簡単でいいですね。

ちなみに投稿ごとに設定を変えることもできますよ。

おわりに

このプラグインの導入でソースコードの紹介がやりやすくなりました。

冒頭でも書いたように、スマホ向けアプリの開発で勉強したことや、ブログのカスタマイズなども紹介したいと思っているので、このプラグインが威力を発揮しそうです!

プラグインはこちらのサイトを参考にさせてもらいました。ありがとうございました!

スポンサードリンク

ピックアップ記事

1

AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD(Power Delivery)対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

2

iPhoneで格安SIMを使って月額料金を節約したい!でも敷居が高くてわからない。そんな風に考えている人はきっと多いはず。ここではiPhoneで格安SIMを利用するまでの手順・乗り換え方法や注意点など、詳しくご紹介しています。

3

快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね!商品の特徴や使ってみた感想をご紹介します。

4

パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。それがウエスタンデジタルの「WD Elements Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。

5

機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

-WordPressカスタマイズ

Copyright© ディライトモード , 2019 All Rights Reserved.