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

時々自分用のメモでソースコードを書くことがあるので、わかりやすくするためにも見やすくなるプラグインを見つけて導入したいなぁとおもっていたら、よいのを見つけました。 2010-09-23_120755 予定ではこのようにソースコードが表示されます。背景色なども変えられるみたい。 早速インストールしてみます。 管理画面のプラグイン>新規追加を選択して、 検索キーワードに「syntaxhighlighter evolved」と入力してプラグインの検索をクリック 2010-09-23_115840 syntaxhighlighter evolved のインストールをクリック 2010-09-23_121252 このようにポップアップするので、「いますぐインストール」をクリック 次の画面でFTP接続情報を入力して開始をクリック 2010-09-23_121521 ↑インストール完了です! この画面がでたら、左下の「プラグインを有効化」をクリックします。 プラグイン管理画面に遷移して「プラグインを使用開始しました」と表示されます。 すると、設定の中に SyntaxHighlighter が表示されるようになるのでそれをクリック。 2010-09-23_121731 2010-09-23_121901 いろいろと設定できそうですね。 まずは色を選びたいと思います。(Color Themeで選びます) 選んだテーマは変更を保存すると、下の「Preview」に反映されますからわかりやすいですね。 default(左) Django(右) 2010-09-23_122700 2010-09-23_122624 Eclipse(左) Emacs(右) 2010-09-23_122820 2010-09-23_122856 Fade to Grey(左) Fade to Grey(右) 2010-09-23_123019 2010-09-23_123107 RDark(左) [None](右) 2010-09-23_123231 2010-09-23_123406 う~ん、いっぱいあって悩むなぁ^^; かめめねっとの背景は黒だし、しっくりくるのは「Fade to Grey」かな。よしこれにしよう! ほかの設定はとりあえずデフォルトのままにしました。 この設定ページの一番下に Shortcode Parameters とショートコードの一例が紹介されてますね。 2010-09-23_125734 なるほど、[ と ] の間に 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 を押します。 2010-09-23_172537 この画面がポップアップするので、HTMLを選択してOKを押します。 2010-09-23_172715 編集モードの画面にはこんな感じになる。 あれ?アンカータグの部分がソースコードじゃなくなっている! とびっくりしますが、このまま投稿しますと、
<div>
 <a href="http://cameme.net/">かめめねっと</a>
</div>
このように表示されます。

読み込み中

クリックでキャンセルします

画像が存在しません



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です