『Seesaa』ブログに『SyntaxHighlighter 3.0.83』を導入した: パソコン・FXなどに関する日記

« Prev 『ZALMAN Z9 Plus』関連サイトへのリンク一覧です | TOP | 『Ubuntu Magazine japan vol.08』（バックナンバー）の記事が公開されていた Next »

Thursday 2012/09/20 23:02

『Seesaa』ブログに『SyntaxHighlighter 3.0.83』を導入した

自分はこのブログで『SyntaxHighlighter』を使う事はほとんど無いような気がするのですが、今後のためにと思い、とりあえず導入しました。

そこで、せっかくなので今回この『Seesaa』ブログに『SyntaxHighlighter 3.0.83』を導入した際の手順を覚え書きとして書いておくことにしました。

以下、自分がおこなった際の手順です。

１．『SyntaxHighlighter 3.0.83』のダウンロード

以下のページにて『Click here to download』のリンクをクリックしてダウンロードします。

SyntaxHighlighter - Download:
http://alexgorbatchev.com/SyntaxHighlighter/download/

ファイル名は『syntaxhighlighter_3.0.83.zip』であり、圧縮されたファイルの中は以下のようなフォルダ構成になっていました。

とりあえず、自分は必要最低限として以下の４つのファイルを取り出し、別のフォルダにコピーして保存しました。

『scripts』フォルダの中の『shCore.js』と『shBrushPlain.js』

『styles』フォルダの中の『shCore.css』と『shThemeDefault.css』

２．『Seesaa』ブログへのアップロード

前記４個のファイルを『seesaa ブログ』へアップロードします。

(1)『ブログの管理メニュー』⇒『ファイルマネージャ』からアップロードします。

自分はアップロード先のディレクトリとして『syntaxhl』を追加し、このディレクトリに４個のファイルをアップロードしました。

アップロードしたファイルのURLは、以下のような形となりました。

https://kingpcfx.up.seesaa.net/syntaxhl/shCore.css
https://kingpcfx.up.seesaa.net/syntaxhl/shThemeDefault.css
https://kingpcfx.up.seesaa.net/syntaxhl/shCore.js
https://kingpcfx.up.seesaa.net/syntaxhl/shBrushPlain.js

注意：アップロード先のディレクトリ『syntaxhl』は自分がつけた任意の名前です。あくまでも例です。

３．『HTML』への追加／変更

(1)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『HTML』をクリックします。

(2)以下のような画面が表示されるので、編集対象となる『HTML名』をクリックします。

今使っているHTMLを直接変更してもよいのですが、自分の場合は、右上の『HTMLの追加』をクリックして新たな HTML を新規に追加し、その追加した HTML には、それまで使用していた HTML から内容をまるごとコピーしました。

ミスをしてトラブルが発生した場合に、簡単に元の状態に戻せるようにするためです。

新たに追加した HTML には、『SyntaxHighlighter 追加』という名前をつけました。

『HTML名』をクリックすると、以下のような編集画面が表示されます。

(3)『</head>』の行の直前に、以下を貼り付けます。

<!--SyntaxHighlighter-->
<link href="https://kingpcfx.up.seesaa.net/syntaxhl/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://kingpcfx.up.seesaa.net/syntaxhl/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="https://kingpcfx.up.seesaa.net/syntaxhl/shCore.js" type="text/javascript"></script>
<script src="https://kingpcfx.up.seesaa.net/syntaxhl/shBrushPlain.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.config.tagName = "syntaxhl";
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
<!--/SyntaxHighlighter-->

【赤字の箇所について補足】
・URLは、アップロードしたファイルのURLです。
・標準では『SyntaxHighlighter』を使用する際のタグ名は『pre』ですが、自分は専用のタグ名として『syntaxhl』を使うことにしたため、『tagName = "syntaxhl"』としています。
・『bloggerMode = true』にしているのは、『Seesaa』ブログの『改行HTMLタグ変換』の設定をデフォルトの『改行は<br/>タグに変換する』にしているためです。

(4)『保存』ボタンをクリックして保存します。

↑『保存』ボタンをクリック後、『設定を完了しました。』と表示されます。

(5)『デザイン > PC > HTML』画面で、今回変更した『HTML名』の箇所の『適用』ラジオボタンをクリックします。

↑ラジオボタンをクリック後、『設定を完了しました。』と表示されます。

以上で『Seesaa』ブログへの『SyntaxHighlighter 3.0.83』を導入は、ひとまず完了です。

あとは必要に応じて、『styles』の下にある表示デザイン用のCSSファイルや、
『scripts』の下にある各言語用のファイル（例．『shBrushJava.js』など）をアップロードし、HTMLに追加します。

以下は、使い方の例です。

<syntaxhl class="brush:plain">syntaxhighlighter のテストです。
注意：タグ名は syntaxhl にしています。
これはサンプルコードです。</syntaxhl>

このようなサンプルのコードを直接記事内に書くと、以下のように表示されます。

syntaxhighlighter のテストです。
注意：タグ名は syntaxhl にしています。
これはサンプルコードです。
『class="brush:plain"』で指定している『plain』（＝プレーンテキスト）は、今回アップロードしたファイルの『shBrushPlain.js』に対応しています。

例えば『css』や『java』のソースコード形式で表示したい場合は、『class="brush:css"』、『class="brush:java"』となりますが、その場合は別途『shBrushCss.js』や『shBrushJava.js』をアップロードして、HTMLへの追加が必要になるというわけです。

以上です。