ブログの記事の中でソースコードを紹介することってありますよね。私もよく、他のブログさんの記事を参考にさせていただきますが、みなさんソースコードの紹介部分を綺麗な表示でわかりやすく紹介してくれてます。

あれはどうやってやるんだろうと色々調べたけれどなかなか検索できず、やっと判明したので今回は「記事内にソースコードを綺麗に表示する方法(プラグイン)」を紹介します。


スポンサーリンク

ソースコードを綺麗に表示するプラグイン

このブログではたまにワードプレスのちょっとしたいじり方(カスタマイズ)を紹介しています。例えば、「SNSボタンのカスタマイズ」や「人気記事ランキングの表示方法」、「カテゴリランキングを記事の上下に表示する方法」なんていう記事です。

で、記事の中で下のような感じでソースコードを紹介しています。

これは例です。

 

コードが色分けされてるし、行番号もついてるし、その他にもボタンが付いてたりとてもわかりやすくて便利ですが、実はこれ、プラグインでできるのでした。

そのプラグインは「Crayon Syntax Highlighter」。



スポンサーリンク


Crayon Syntax Highlighterの使い方

まずはプラグインのお決まりですが、管理画面のプラグインメニューから「新規追加」で検索→インストール→有効化してください。

そうしたら記事作成画面の上メニューにというマークが現れます。

これをクリックすると下のような画面が現れます。

赤矢印の欄にソースコードを書いて、右上のAddボタンを押すだけです。他は特にいじらなくても大丈夫です。(私はいじっていません。)細かい設定はご自分のブログのデザインに合わせてカスタマイズされるといいと思います。

これでとても簡単にソースコードをブログ記事内に綺麗に表示することができるようになります。私もこれで気分的にもデザイン的にもかなりスッキリしました。あなたも是非お試しください。

 

スポンサーリンク