ブログ記事の中にHTMLやプログラムのソースコードをキレイに表示させたいと思い、SyntaxHighlighterを導入することにしました。
SyntaxHighlighterを使うとweb上でソースコードを表示した時に、非常にキレイに表示してくれます。
こんなカンジです。
1 2 |
<script type="text/javascript" src="blog/shCore.js"></script> <script type="text/javascript" src="blog/shAutoloader.js"></script> |
ソースコード上でダブルクリックするとコードが全選択状態になるのでコピーが簡単にできます。 以下、SyntaxHighlighterの導入メモを備忘録として残しておこうと思います。
§1 SyntaxHighlighterの入手
最初に、SyntaxHighlighterを入手します。(自分はバージョン3.0.83を導入しました)ここからダウンロードできます→SyntaxHighlighterのダウンロード
§2 SyntaxHighlighterをアップロード
SyntaxHighlighterを入手したら、必要なファイルをFC2ブログ管理サイトへアップロードします。
この中で必要なファイルは ・[styles]フォルダの[shCore.css]と[shCoreDefault.css] ・[scripts]フォルダ内のファイル全て です。 [scripts]フォルダ内のファイルは必要な言語用のものだけアップロードすれば良いのですが、とりあえず全部アップロードすることにします。 [FC2ブログ管理]→[ファイルアップロード]からアップロードします。 ファイルのアップロードが完了したら、[ファイル一覧]の[ファイル情報]から、ファイルのアップロード先を確認しておいて下さい。(次の作業で必要になります)
アップロード先の例) http://blog-imgs-30.fc2.com/a/b/c/blog/〜
§3 ブログテンプレートの編集
SyntaxHighlighterのアップロードが完了したら、次はブログのテンプレートを編集します。 [FC2ブログ管理]→[テンプレートの設定]からテンプレートを編集します。 ヘッダー部分(<head>縲鰀</head>)に以下を挿入します。(cssファイルを読み込ませます) [アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。
1 2 3 4 |
<!-- ▼▼▼開始▼▼▼--> <link type="text/css" rel="stylesheet" href="[アップロード先]/shCore.css" /> <link type="text/css" rel="stylesheet" href="[アップロード先]/shCoreDefault.css" /> <!-- ▲▲▲終了▲▲▲ --> |
ボディ部分の最後(</body>の直前)に以下を挿入します。 こちらも[アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!-- ▼▼▼開始▼▼▼ --> <script type="text/javascript" src="[アップロード先]/shCore.js"></script> <script type="text/javascript" src="[アップロード先]/shAutoloader.js"></script> <script type="text/javascript" src="[アップロード先]/shLegacy.js"></script> <script type="text/javascript" src="[アップロード先]/shBrushXml.js"></script> <script type="text/javascript"> SyntaxHighlighter.autoloader ( "applescript [アップロード先]/shBrushAppleScript.js", "actionscript3 as3 [アップロード先]/shBrushAS3.js", "bash shell [アップロード先]/shBrushBash.js", "coldfusion cf [アップロード先]/shBrushColdFusion.js", "cpp c [アップロード先]/shBrushCpp.js", "c# c-sharp csharp [アップロード先]/shBrushCSharp.js", "css [アップロード先]/shBrushCss.js", "delphi pascal [アップロード先]/shBrushDelphi.js", "diff patch pas [アップロード先]/shBrushDiff.js", "erl erlang [アップロード先]/shBrushErlang.js", "groovy [アップロード先]/shBrushGroovy.js", "java [アップロード先]/shBrushJava.js", "jfx javafx [アップロード先]/shBrushJavaFX.js", "js jscript javascript [アップロード先]/shBrushJScript.js", "perl pl [アップロード先]/shBrushPerl.js", "php [アップロード先]/shBrushPhp.js", "text plain [アップロード先]/shBrushPlain.js", "py python [アップロード先]/shBrushPython.js", "ruby rails ror rb [アップロード先]/shBrushRuby.js", "sass scss [アップロード先]/shBrushSass.js", "scala [アップロード先]/shBrushScala.js", "sql [アップロード先]/shBrushSql.js", "vb vbnet [アップロード先]/shBrushVb.js", "xml xhtml xslt html [アップロード先]/shBrushXml.js" ); SyntaxHighlighter.config.bloggerMode=true; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); </script> <!-- ▲▲▲終了▲▲▲ --> |
※bloggerMode=trueにすると自動改行機能=ONでも改行が正しく表示されます。
1 |
SyntaxHighlighter.config.bloggerMode=true; |
§4 SyntaxHighlighterの使い方
SyntaxHighlighterを使うにはソースコード部分を
<pre class=”brush:使用する言語;”>ソースコード</pre>
のように<pre>タグで囲んで記述します。
ただしソースコードはHTML特殊文字を変換する必要があります。
※HTML特殊文字
“→"
&→&
<→<
>→>
「ソースコード HTMLタグ変換」などで検索すると自動で変換してくれるツールやサイトが見つかるので、それを利用すると便利です。
「使用する言語」に指定するコードは以下のコード表から選んで指定します。
HTMLの場合は<pre class=”brush:html;”>ソースコード</pre>となります。
以上で、ブログ記事内のソースコードがキレイに表示されます。