2011年03月26日

SyntaxHighlighter 3.0 導入手順

ソースコードのハイライト表示をするためにSyntaxHighlighterを導入してみます。< br/> この記事で実験を兼ねて、導入手順をメモっておきます。

1.SyntaxHighlighterの入手

http://alexgorbatchev.com/SyntaxHighlighter/download/
上記サイトからSyntaxHighlighterをダウンロードします。(私がダウンロードしたときは 3.0.83でした)

2.javascriptとCSSファイルのアップロード

解凍してできた「scripts」と「styles」をアップロードします。
自分のサイトの場合は任意の場所に置けば良いです。
さくらのブログの場合は「ファイルマネージャ」で「scripts」「styles」のディレクトリを追加し、中身のファイルを全てアップロードします。「ファイルマネージャ」だとファイルは10個ずつしかアップロードできないので、ディレクトリを追加したあとはFTPで転送します。もちろん、「ファイルマネージャ」でアップロードしても良いのですが、面倒ですし、余計なサムネイルが表示されるので、私はFTPで転送しました。

さくらのブログでアップロードしたファイルのリンクは下記のようになります。
***はそれぞれのアカウント名になります。
http://***.sakura.ne.jp/sblo_files/***/scripts/shCore.js

3.CSSリンク追加

head部の末尾にCSSのリンクを追加します。
さくらのブログの場合は「デザイン」→「HTML」から編集できます。一度も編集したことが無い場合は、右上の「HTMLの追加」をクリックすると、新しいテンプレートを編集することができます。

<head>

〜省略〜

<!-- SyntaxHighlighter -->
<link type="text/css" rel="stylesheet" href="http://***.sakura.ne.jp/sblo_files/***/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="http://***.sakura.ne.jp/sblo_files/***/styles/shThemeDefault.css">

</head>

4.Javascript追加

body部の終わりにJavascriptを追加します。

<body>

〜省略〜

<!-- SyntaxHighlighter -->
<script type="text/javascript" src="http://***.sakura.ne.jp/sblo_files/***/scripts/shCore.js"></script>
<script type="text/javascript" src="http://***.sakura.ne.jp/sblo_files/***/scripts/shAutoloader.js"></script>
<script type="text/javascript" 
  SyntaxHighlighter.autoloader(
     "xml xhtml xslt html       http://***.sakura.ne.jp/sblo_files/***/scripts/shBrushXml.js",
     "cpp c                     http://***.sakura.ne.jp/sblo_files/***/scripts/shBrushCpp.js",
     "c# c-sharp csharp         http://***.sakura.ne.jp/sblo_files/***/scripts/shBrushCSharp.js"
     <!-- ここに使用するBrushを追加します -->
  );
  SyntaxHighlighter.defaults['toolbar'] = false;  <!-- ツールバー非表示 -->
  SyntaxHighlighter.config.bloggerMode = true;    <!-- 自動改行の対応 -->
  SyntaxHighlighter.all();
</script>
</body>

SyntaxHighlighter.autoloader( 〜 )
上記はハイライト表示する定義ファイル(shBrush***.js)を自動で読み込ませるための設定です。必要な定義をあらかじめ定義しておくと、その定義を使用したときに自動で読み込まれます。

SyntaxHighlighter.defaults['toolbar'] = false;
上記はツールバーを非表示にするための設定です。ツールバーを使用しない場合は設定しておかないと、バージョン情報を表す「?」だけが表示されてしまいます。

SyntaxHighlighter.config.bloggerMode=true;
上記はブログなどで改行を<br>タグに自動変換する場合に対応するものです。

5.ソースの記述

実際にソースを記述するときは<pre>タグを使って記述します。このとき、"<",">"が含まれると、HTMLのタグと解釈されてしまうため、"&lt;","&gt;"と記述します。

<pre class="brush:c" title="サンプル">
#include&lt;stdio.h&gt;
int main()
{
  puts("Hello World !\n");
  return 0;
}
</pre>

上記のように記述すると、下記のように表示されます。

#include<stdio.h>
int main()
{
  puts("Hello World !\n");
  return 0;
}

良かったらクリックしてください
にほんブログ村 IT技術ブログ プログラム・プログラマーへ  人気ブログランキングへ

posted by among at 07:25 | Comment(0) | TrackBack(0) | メモ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/43994659

この記事へのトラックバック