管理人が投稿記事を書くときには、よくプログラムコード（HTML、VB.NET等）を掲載したいときがあります。そのときにのプログラムコードの編集で、使い勝手がよく、見栄えがきれいな「SyntaxHightlighter Evolved」なるものを見つけました。現在は「SyntaxHightlighter2.1.0」が最新でいつ更新されたかは、わかっていません。では、早速このプラグインを動作させるまでの手順を記録しておこうと思います。
| |
SyntaxHightlighter Evolved ダウンロード |
|
まずはプラグインのダウンロードです。
- webnaさんがリンクされてたここからダウンロードしました。表示されたサイトの「DOWNLOAD」をクリックすれば、以下のメッセージが表示されます。
 |
| 「DOWNLOAD」を押して、適当な場所に保管します。 |
- その圧縮された「syntaxhightlighter.zip」を解凍します。管理人は解凍ツールに「Lhaplus」にて行いました。
- 解凍してできたフォルダを、WinSPC（管理人はこれで）、FTP等で「（任意）../wordpress/wp-content/plugins」内に転送します。（例：/var/www/html/wordpress/wp-content/pluginsなど）
次にWordPress管理画面で、転送した「Syntaxhightlighter Evolved」が追加されたかどうかを確認します。
- WordPressのログイン画面を呼び出します。
 |
| ユーザー名とパスワードを入力して「ログイン」します。 |
- ログインが成功すれば管理画面の「プラグイン」の「インストール済み」の画面を開きます。
- プラグイン画面の「停止中のプラグイン」一覧に下記の項目があれば、転送できています。
 |
| 追加されている。 |
| |
実際にSyntaxHightlighter Evolved を使用する |
|
では、テストも兼ねて実際に使用することにします。
- 先ほどの「プラグイン」の画面で追加した「SyntaxHightlighter Evolved」の項目の右端の「使用する」をクリックします。「使用中のプラグイン」に追加されプラグインとして動作出来るようになります。
- 登録ができれば、いよいよ投稿記事内に載せます。まず、投稿の「新規追加」を行います。タイトル等は自由に付けてください。
- 次に、「HTML」入力欄に以下を入力します。
下記の内容を使用するときは[ ] は半角にしてくださいm(__)m
［html］
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>TEST</title>
</head>
<body>
<h2>Hello World!!</h2>
</body>
</html>
［/html］
以上の内容は以下のようにページに表示されます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>TEST</title>
</head>
<body>
<h2>Hello World!!</h2>
</body>
</html>
| |
SyntaxHightlighter Evolved の パラメータ設定 |
|
「SyntaxHightlighter Evolved」のパラメータをいろいろ設定してみました。（
下記の内容を使用するときは[ ] は半角にしてください。m(__)m）
- 開始行番号の指定（デフォルトは:１）
［html firstline="10"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
 |
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
おおっ、開始行番号が「１０」から始まっている。
- リンクの解除（デフォルト:True)
［html autolinks="false"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
リンクが解除されている。
- ツールバーの非表示（デフォルト:表示する)
［html toolbar="false"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
ツールバーが消えている。
- 行番号の非表示（デフォルト:表示する)
［html gutter="false"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
行番号がが消えている。
- シンプルに表示する（デフォルト:false)
［html light="true"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
行番号とツールバーの両方が消えている。
- 折りたたみ表示する（デフォルト:false)
［html collapse="true"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
折りたたまれた表示となった。
- 指定行をハイライトする
［html highlight="4"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
指定した４行目がハイライトされた。
- 複数行を一度にハイライトする
［html highlight="2,4"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
指定した２行目と４行目がハイライトされた。
- ルーラーの表示（デフォルトは非表示)
［html ruler="true"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
ルーラーが表示された。（あんまり意味ないな～）
- Tabサイズを指定する（デフォルト：４）
[html tabsize="10"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
Tabサイズが「１０」になった。
- パラメータを組み合わせてみる
［html light="true" highlight="2,4"］
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
［/html］
| プレビューしてみる。 |
|
<html>
<body>
<a href="http://bitmacro.net">Bitmacro.net</a>
</body>
</html>
シンプル表示されて、２，４行目がハイライトした。
以上、いろいろ状況に応じて変更してみてください。
[...] Bitmacroブログ：SyntaxHighlighter Evolved のプラグインへの追加及びSyntaxHighlighter EvolvedのSetting 導入からセッティングまで図解入りでとてもわかりやすいです。 [...]
[...] SyntaxHighlighter Evolved のプラグインへの追加 (Bitmacroブログ) [...]
[...] SyntaxHighlighter Evolved のプラグインへの追加 [...]
[...] WordPress で記事内に美しくソースコードを掲載されているのをよく見かけます。 このようにソースコードを表示させる為のプラグインがいくつかあるのですが、私的にお薦めなのは、『 SyntaxHighlighter Evolved 』という上記スクリーンショットのプラグインです。 使い易いか否かの判断人それぞれによりますが、綺麗に表示されますので私は入れています。 プラグイン配布元 SyntaxHighlighter Evolved（当方のWP2.9.2環境で検証済み） 導入方法 1. プラグイン配布元より『syntaxhighlighter.zip』を任意のフォルダにダウンロード 2. 解凍後、『syntaxhighlighter』をwp-content/ pluginsへフォルダごとアップロード。 3. 管理画面（Plugins（プラグイン））にて『syntaxhighlighter』を有効化する。 使用方法 基本的にはデフォルトのままあえて設定変更なしで大丈夫です（当サイトは完全デフォルト）が、 カスタマイズされる場合はテンプレートやパラメータの設定変更が可能です。 パラメータ設定 『Bitmacroブログ』さんで図解説明されていますのでこちらを参考にされるとよいと思います。 テンプレートの設定 私的にはデフォルトが一番見易いと思うのですが、変更される場合は以下のように変更します。 [ダッシュボード内設定]⇒[SyntaxHighlighter Settings]⇒[Color Theme] から８パターンが選択出来ますので、希望のテンプレを選択し、[変更保存]でプレビューされます。 使い方 [コード部分の記述はソースに合ったコードで囲みます] 例えば、 [...]