ソースコードは綺麗なほうがいい！ Ardor(@ArdorOnline)です。 ソースコードってブログに載せるとインデントや装飾ができなくて困ってました。 SyntaxHighlighterを利用すると、とても綺麗に表示できるので導入しました！ Bloggerへの導入方法をご紹介します。
SyntaxHighlighterとは
SyntaxHighlighterを簡単にご紹介すると、
ソースコードを綺麗に表示する為に作成されたライブラリです。
普段お使いのエディタに近い感覚に表示できます。
説明するより見て頂いた方が早いので次のソースをご覧下さい。
function helloSyntaxHighlighter() {
return "hi!";
}
いかがですか？綺麗に表示されると思います。
SyntaxHighlighter導入方法
導入方法は、２つあります。
- サーバをお持ちであれば、SyntaxHighlighterをダウンロードして参照
- サーバがない場合は、公開されてるライブラリを参照
バージョンアップが行われてるので、本来はダウンロードして利用するのが良いと思います。
ダウンロード：SyntaxHighlighter - Download
しかし、Bloggerにはファイルアップロードが存在しないので、公開されているライブラリを参照します。
SyntaxHighlighterで扱えるソース
導入する前に扱えるソースをご紹介します。
一覧にすると次のようになります。
| Brush name | Brush aliases | ライブラリファイル |
|---|---|---|
| AppleScript | applescript | shBrushAppleScript.js |
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| bash shell | bash, shell | shBrushBash.js |
| ColdFusion | coldfusion | shBrushColdFusion.js |
| C C++ | c, cpp | shBrushCpp.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Sass | sass | shBrushSass.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | html, xhtml, xml, xslt | shBrushXml.js |
どうやらAppleScriptとSassが追加になったようです。
今後も対応言語が増えそうなライブラリですね。
使いたい言語が決まったら次へライブラリファイルをメモして次へ進んでください。
ライブラリを参照する
SyntaxHighlighterライブラリを参照します。
headや記事中、HTML/Javascriptガジェッドどこでもいいのでリンクします。
オススメはテンプレートに埋め込むheadへの配置です。
今回はバージョン指定でリンクしました。
最新バージョンがリリースされた時は変更が必要になると思います。
もしバージョンアップにも対応したという方は、以下のURLにすると最新バージョンへリダイレクトされるようです。
http://alexgorbatchev.com/pub/sh/current/styles/xxxx.css
http://alexgorbatchev.com/pub/sh/current/scripts/xxxxx.js
※xxxx部分はそれぞれ対応するライブラリファイルを記述して下さい。
ソースコードの書き方
ソースコード表示する際には、preタグで囲み、classで対応するbrushに言語を指定します。
Javascriptのソースを指定した例は次の通りです。
<pre class="brush: js;">
function helloSyntaxHighlighter() {
return "hi!";
}
</pre>
これでソースコードが綺麗に表示されました！
最後に
今回は導入方法までしかご紹介しませんでしたが、
SyntaxHighlighterには様々な設定項目（オプション）が用意されていますので、
次回、ご紹介したいと思います。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿