導入編：
DevAchieve: BloggerにソースコードをハイライトするSyntaxHighlighterを導入する
SyntaxHighlighterを使用してソースをカラフルに表示するには、
以下の二通りの方法で記述することができます。
- preタグを使う
- scriptタグを使う
preタグを使う
<pre class="brush: alias;">
// ココにソースを記述
</pre>
メリット：後述のscriptタグと違ってハイライトスクリプトが読み込まれなくてもテキストとして表示される。
デメリット：<以降がタグとして認識されるため<と書き換えなければならない。
Bloggerの人気の投稿ウィジェットに表示される記事の前文にpreタグまで含まれると
表示が狂うことがある。(何が原因かわからないけどコレのせいで最初からHTML/CSS組み直した(´Д⊂ヽ)
このせいで記事の公開が遅れました…。とりあえず対策は記事書いてすぐにコードを貼らないこと。
scriptタグを使う
<script class="brush: alias;" type="syntaxhighlighter"><![CDATA[
// ココにソースを記述
]]></script>
メリット：<以降がタグとして誤認されることがない。(</script>タグだけは</script>と記述する必要あり)
デメリット：scriptが読み込まれるまで非表示である。また、AutoPager系の自動ページ読み込みで
読み込まれたページはハイライトスクリプトが動かず、ソースコードが非表示のままになる。
また、RSSやモバイル表示でソースコードが非表示になる。
ということで個人的にpreタグを使いたいのでpreタグで説明していきます。
同様の設定はscriptタグでも出来るので適宜読み替えて下さい。
使用言語の設定
SyntaxHighlighterを使用する際には使用言語を設定する必要があります。
上のどちらの方法でも同じで、一行目の"alias"の部分を使用言語のエイリアスに書き換えます。
Brush name
使用言語 | Brush aliases
言語のエイリアス | File name
JSファイル名 |
|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.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 |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
SyntaxHighlighter - Bundled Brushes
例えばHTMLをシンタックスハイライトしたい場合は、以下のようにaliasをhtmlにします。
<pre class="brush: html;">
// ココにソースを記述
</pre>
特定の行を強調表示する
下のやつは1行目が強調表示されているのでブログなどで言及する時に
読者にわかりやすくて便利です。
これは以下のように行番号を指定することによって設定可能です。
<pre class="brush: alias; highlight: [1];">
// ココにソースを記述
</pre>
カンマ区切りで行数を指定することによって複数行を強調表示することも出来ます。
開始行番号の指定
元のソースコードを全て載せるとスペースを取りすぎるので
一部分を抜き出して、対応する行だけ説明したい時に使います。
前の記事で言うと、「縦スクロールバーを消す」あたりで使った機能です。
<pre class="brush: alias; first-line: 10;">
// ココにソースを記述
</pre>
1行目のように指定することによって行番号が10から始まるようになりました。
タイトル設定
<pre class="brush: alias;" title="タイトル設定">
// ココにソースを記述
</pre>
さっきまではclass属性の中に記述していましたが、title属性を使用しているので注意です。
ちなみにtitle属性の属性値を記述しなければタイトルは表示されません。
title=""のままタイトル未記入でも表示には影響されないということです。
その他の設定
ソースコードの折りたたみ・展開、行番号非表示、
ソースコードと同時にＨＴＭＬタグのハイライト表示、
タブサイズの指定、などの設定はコチラに載っています。
今日のPython: ブログ上でプログラムソースを表示する方法②
まとめ
よく使う上の3つのオプションを指定したのがコチラです。
<pre class="brush: alias; first-line: 1; highlight: [,];" title="">
// ココにソースを記述
</pre>
highlightとtitleは未指定でも表示に影響無いのでイチイチ消さなくても良いです。
後はaliasを自分の使用言語のエイリアスに書き換えて単語登録でもしておけばOK！
これであなたもブログでソースコードを綺麗に表示できます！
それでは。
記事フッターのソーシャルボタンがIEだけ右の画像のように改行されてました。
