俺の砂箱 - さくらのブログやSeesaaブログでSyntaxHighlighterを使う。
http://sunabako.sblo.jp/article/45214485.html
ただ、説明通りにやるだけだと、自分の頭に残らないよなぁ、と思って本家も見ながら設定してみることに。
本家サイトはコチラ。
http://alexgorbatchev.com/SyntaxHighlighter/
Downloadページへ。
http://alexgorbatchev.com/SyntaxHighlighter/download/
「Click here to download」と書かれたリンクがあったのでクリック。
zipファイルをダウンロード。
2012/03/18 時点のバージョンは3.0.83でした。
使い方がわからんのでinstallationページへ。
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
Basic Steps
To get SyntaxHighlighter to work on you page, you need to do the following:
1. Add base files to your page: shCore.js and shCore.css
2. Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)
3. Include shCore.css and shThemeDefault.css
4. Create a code snippet with either <pre /> or <script /> method (see below)
5. Call SyntaxHighlighter.all() JavaScript method
- shCore.jsとshCore.cssを自分のページに置いて、
- 使いたいbrushesも置いて、
- shCore.cssとshThemeDefault.cssを読み込んで、
- コードを<pre />か<script />で書いて、
- SyntaxHighlighter.all()を呼ぶ。
ってことかしら。
最低限の説明っぽい…。[俺の砂箱」さんの方が説明充実してるなぁ。
画像とかswfのファイルはダウンロードしたファイルには含まれていなかったけど、バージョンが変わったせいかしら。
一応bloggerモードの説明は↓のページに書いてあるね。
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
これだけ調べたら、あとは「俺の砂箱」さんの説明通りでいいや、という気分に。
とりあえず、ヘッダーに必要な<script>と<link>を↓な感じで書く。
フッターには以下を記述。
んで、コードを書くところは<pre class="brush: ○○">〜</pre>で括る、と。
○○はコードの種類で、rubyとかhtmlとか書くらしい。
これでできあがりー！
便利ですね！
