開発を行なっていると、

自分用の備忘録として、プログラムのソースコードを書き溜めるブログを始めたくなります。

 

いわゆる、開発ブログというやつですが、

これを運営するにあたって、

ソースコードの掲載方法として良い方法があります。

 

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」で問題ありません。

規定の設定 - タイトル

「規定の設定 - 一般」で、

「コードボックスの表示を閉じておく」にチェックをいれた場合、

ここに入力したテキストのみが表示され、

このテキストをクリックすることでコードボックスが表示されます。

関連記事

 

 

おすすめの記事