ブログにソースコードを張る方法（SyntaxHighlighter）

以前gist使ったソースコードを張る方法を紹介した。

しかし実際に使用してみると、いちいち貼付け用コードを作成していくのはめんどくさくコード管理も大変だったので、直接記事にコードを書く方法を探してみた。

※この記事の方法では表示できなくなっていたので新しい記事参照

SyntaxHighlighterの導入

例としてPHPのコードを書く手順で進める

プラグインの入手

http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator
上のURLから使いたい言語をチェックし、[GENERATE]ボタン押下

画面繊維すると長ったらしい文字列が出る。コレをコピーする



それをマイブログ→テンプレート→HTMLの編集　の<tatile>の下らへんにペースト




これで準備OK


1. コードを書いてみる
下のタグで囲んでXXXに読みこんだ言語を書く
ちょっと解説する
• scriptタグの訳
<pre>タグを使うのが一般的だけど、このタグだと、「<」「>」が使えいない。PHPやHTML,XMLのとき不便になるので、<script>で代用。type="syntaxhighlighter"を指定すれば同じ用に使える。
• classでデザイン調整

・brush	⇒	言語設定
・auto-links	⇒	URLを書いたとき、ハイパーリンクになるフラグ trueでハイパーリンクになる。デフォルトはtrue
・toolbar	⇒	「？」表示フラグtrueにしてると右にアイコンがでる デフォルトはtrue

今回はPHPを入れたのでこんな感じ↓

表示してみるとこんな感じ↓


<?php
    echo "hello";

利点は簡単にコードを編集できる点、一回プラグインを設定すると何回でも使える点
欠点はスマホで表示できないってこと。。。（結構致命的）
もっといいやつを早く見つけねば