開発を行なっていると、
自分用の備忘録として、プログラムのソースコードを書き溜めるブログを始めたくなります。
いわゆる、開発ブログというやつですが、
これを運営するにあたって、
ソースコードの掲載方法として良い方法があります。
「Syntax Highlighter Evolved」という
WordPress公式のプラグインを使うことで、
関数が色分けされて視覚的に美しいソースコードを簡単に表示することができます。
ここでは、このプラグインの導入手順を見ていきます。
「Syntax Highlighter Evolved」のプラグインファイルを入手する
公式ページから、
Syntax Highlighter Evolvedのファイル一式をダウンロードします。
外部ページプラグインダウンロードページはこちら
※WordPressのプラグインメニューから「Syntax Highlighter Evolved」と検索しても出てきますので、そちらからインストールしても良いです。
FTPでファイルをサーバー上に配置する
サーバー上の「/wp-content/plugins」ディレクトリに、
解答したプラグインをディレクトリごとアップロードします。
WordPress管理画面のプラグインメニュー上で、
「Syntax Highlighter Evolved」が出てきますので、
有効化をクリックします。
プラグインの設定を行う
WordPress管理画面の
「設定」→「SyntaxHighlighter」から、
プラグインの詳細設定を行うことができます。
SyntaxHighlighterのバージョン
バージョンを「2.x」「3.x」から選択することができます。
大きな違いとしては、
「2.x」はクリップボードにへコピーができないけれど、
ソースコードの折り返し表示ができて見やすい。
「3.x」はクリップボードにへコピーはできるため、
利用者が長いソースコードも簡単にコピーできるけれど、
ソースコードの折り返し表示ができない点になります。
テーマ
表示のデザインを変更することができます。
導入するWEBサイトのデザインテイストに合わせて変更すると、より見やすくなります。
デフォルト
Django
Eclipse
Emacs
Fade to Grey
Midnight
RDark
なし
すべてのブラシを読み込む
基本的にチェックは外しておいて大丈夫です。
規定の設定 - 一般
行数表示やインデントタブ許容、
折り返しの有無といった規定の微調整を行うことができます。
規定の設定 - 追加のCSSのclass名(複数可能)
テーマで自動適用されるデザイン以外にも、
自分でcssを使ってデザインをカスタマイズすることができます。
その場合、使用するcssのclass名をここに入力することでデザインが適用されます。
規定の設定 - 行番号の開始
行数の開始番号を自由に変更できますが、
通常「1」で問題ありません。
規定の設定 - 行番号の余白
行数の余白を自由に調整できますが、
通常「なし」で問題ありません。
規定の設定 - タブのサイズ
タブのサイズを自由に調整できますが、
通常「4」で問題ありません。
規定の設定 - タイトル
「規定の設定 - 一般」で、
「コードボックスの表示を閉じておく」にチェックをいれた場合、
ここに入力したテキストのみが表示され、
このテキストをクリックすることでコードボックスが表示されます。
関連記事
WordPressでソースコードを美しく表示するプラグイン「Syntax Highlighter Evolved」の記述方法
