ブログでソースコードを紹介したい時ってありますよね？作ったプログラムやマクロを紹介したり、ブログテーマのカスタマイズを紹介したり。
そんな時に便利なプラグインを先日、導入したので紹介+備忘として書いておきたいと思います。ソースコードを綺麗に見やすく表示する設定とプラグインです。
ソースコードをブログに載せる時にぜひ活用してみてください。
ブログでソースコードを綺麗に紹介する方法
今回はWordpressのプラグインを使う設定方法を紹介していきます。
特徴も紹介していくのでよかったら参考にしてみてください。
プラグインを使ってソースコードを綺麗に紹介
このブログでは「Crayon Syntax Highlighter」というプラグインを使ってコードを紹介しています。
このプラグインには以下のような特徴があって、とても使いやすく分かりやすいものになっています。
- カスタマイズしなくても綺麗に表示できる
- 操作がわかりやすい、記事に簡単にコードを表示できる
- カスタマイズ項目が豊富で見た目にこだわれる
デフォルトの設定だと↓のような表示になります。
クリックで大きくなります。
テーマ設定が豊富にあり、このブログでは↓の表示にしています。
クリックで大きくなります。
デメリットとしては、ソースコードを大量に紹介する場合などにブログの表示が遅くなる事があるようです。
また、先日までは日本語化されていたようですが今は英語になっています・・・。
最初に特徴を紹介したので、続いてインストール方法と使い方を紹介していきます。
Crayon Syntax Highlighterのインストール方法
まずはインストール方法を紹介していきます。通常のプラグイン追加と変わらないので簡単です。
- 通常のプラグインインストールと同様にWordpress管理画面から「プラグイン」→「新規追加」を選びます。
- プラグイン検索欄で「Crayon Syntax Highlighter」を検索すると、今回導入するプラグインが出てきます。
- 「今すぐインストール」を選んでインストールします。
- インストールが完了したら、「プラグインを有効化」を選びます。
Crayon Syntax Highlighterの使い方
使い方もとても簡単ですぐに使えます。細かい設定の前にまずはそのまま使ってみましょう！
記事投稿画面を開くとツールバーの一番右側にアイコンが追加されているので、それをクリックします。
クリックで大きくなります。
タイトルにソースコードのタイトルを、コードの部分にソースコードを書きます。ソースコードを書き終わったら、右上の「Add」ボタンを押します。
クリックで大きくなります。
たったこれだけでブログに見やすいソースコードが追加されます。
Crayon Syntax Highlighterの設定方法
設定の一部を紹介していきます。
このプラグインはテーマがたくさん用意されているので、テーマを変えるだけでもソースコードが綺麗に紹介できるようになります。
WordPressの設定の部分に「Crayon」が追加されているので、それを選びます。
テーマの部分から好きなテーマを選びます。選ぶと右に見た目が表示されます。
クリックで大きくなります。
下のほうで細かいカスタマイズをすることも出来ます。
細かいカスタマイズの部分はほかのブログでも紹介しているので、ぜひ調べてみてください。
最後に
今回はプラグインを使ってソースコードを綺麗に見やすく表示する方法を紹介していきました。ほかにもプラグインを使わずに設定する方法もあるので、近いうちにまた紹介していきたいと思います。
ブログでソースコードを紹介する際などに、よかったら参考にしてみてください。