ソースコードを見やすくする SyntaxHighlighter Evolved を入れてみた

時々自分用のメモでソースコードを書くことがあるので、わかりやすくするためにも見やすくなるプラグインを見つけて導入したいなぁとおもっていたら、よいのを見つけました。 予定ではこのようにソースコードが表示されます。背景色なども変えられるみたい。 早速インストールしてみます。 管理画面のプラグイン＞新規追加を選択して、 検索キーワードに「syntaxhighlighter evolved」と入力してプラグインの検索をクリック syntaxhighlighter evolved のインストールをクリック このようにポップアップするので、「いますぐインストール」をクリック 次の画面でFTP接続情報を入力して開始をクリック ↑インストール完了です！ この画面がでたら、左下の「プラグインを有効化」をクリックします。 プラグイン管理画面に遷移して「プラグインを使用開始しました」と表示されます。 すると、設定の中に SyntaxHighlighter が表示されるようになるのでそれをクリック。 いろいろと設定できそうですね。 まずは色を選びたいと思います。（Color Themeで選びます） 選んだテーマは変更を保存すると、下の「Preview」に反映されますからわかりやすいですね。 default（左） Django（右） Eclipse（左） Emacs（右） Fade to Grey（左） Fade to Grey（右） RDark（左） [None]（右） う～ん、いっぱいあって悩むなぁ＾＾； かめめねっとの背景は黒だし、しっくりくるのは「Fade to Grey」かな。よしこれにしよう！ ほかの設定はとりあえずデフォルトのままにしました。 この設定ページの一番下に Shortcode Parameters とショートコードの一例が紹介されてますね。 なるほど、［ と ］ の間に phpとかhtmlとかcssとかそれぞれ書きたいソースコードにあわせて記述を変えればよいみたいですね。 必要に応じて「Shortcode Parameters」から拾ってくれば、いちいちこの設定画面で変更しなくても、この属性のON/OFFをするだけで変更できるので便利です。 使うのは、

• autolinks ・・・アンカータグのリンク設定 autolinks="false" で解除
• firstline ・・・開始行番号の指定（デフォルトは1）firstline="5" で5から開始
• gutter ・・・行番号の表示（デフォルトは表示）gutter="false" で非表示
• highlight ・・・指定行のハイライト highlight="2,4" で2と4行をハイライト

このぐらいですかね。 今後ソースコードを書く機会があったら早速使ってみよう！ 参考にさせていただいたブログ SyntaxHighlighter EvolvedのSetting – Bitmacroブログ

Windows Live Writer から投稿する場合の注意点

WLWから普通に投稿しようとすると失敗します・・・^^; 編集画面にペースとしても、ソース画面でペーストしても、↓こんな感じになってしまいます。

    <br />&lt;div&gt;     <br />&#160;&#160;&#160; &lt;a href=&quot;<a href="http://cameme.net/&quot;">http://cameme.net/&quot;</a>&gt;かめめねっと&lt;/a&gt;     <br />&lt;/div&gt;     <br />

・・・ あちゃーな感じです。 ちゃんと反映させるには、予めエディター等に載せたいソースコードを書いておいて、 WLWの編集（ソースじゃなくて大丈夫）画面で位置を指定してから、 Ctrl＋Shift＋v を押します。 この画面がポップアップするので、HTMLを選択してOKを押します。 編集モードの画面にはこんな感じになる。 あれ？アンカータグの部分がソースコードじゃなくなっている！ とびっくりしますが、このまま投稿しますと、

<div>
 <a href="http://cameme.net/">かめめねっと</a>
</div>

このように表示されます。