他のブログでも同じような手順を踏めば、
そのまま使えるかと思いますが、
ちまたでよく使われているブログに掲載のコードが見やすくなる
「syntaxhighlighter」を実装してみました。
まずはサイトからデータをダウンロード。
2013.05.05現在ではバージョンは3.0.83。
本文１行目にある「 Click here to download.」を
クリックするとダウンロードできます。
http://alexgorbatchev.com/SyntaxHighlighter/
データをダウンロードしたら解凍してください。
（現バージョンならsyntaxhighlighter_3.0.83.zipがダウンロードされます）
レンタルサーバーを借りているようなFTPで丸ごとファイルを
アップロードできるような環境だったら、解凍したフォルダ内の
「scripts」と「styles」をまるっとアップロードすれば良いのですが、
シーサーブログだとフォルダをまるっとアップすることはできないので、
必要なファイルのみアップロードしていきます。
必要なファイルを取り出し、シーサーブログにアップロードします。
必ず必要なファイル
「scripts」に入っている「shCore.js」
「styles」に入っている「shCoreDefault.css」
必ず１つはアップしておかなければならないファイル（複数でも可、全部でも可）
「scripts」に入っている各ソースようのJSファイル
特にどれというものがなければ「shBrushPlain.js」ファイルを入れて置いてください。
言語ごとのJavaScript（主なものというか私が使っているもの）
| 言語 | JavaScript |
|---|
| HTML／XHTML／XML | shBrushXml.js |
| CSS | shBrushCss.js |
| JavaScript | shBrushJScript.js |
| PHP | shBrushPhp.js |
| Perl | shBrushPerl.js |
選んだファイルをシーサーブログにアップロードします。
『ブログの管理メニュー』⇒『ファイルマネージャ』からアップロードしてください。
。
ファイルがアップロードできたら、デザイン＞HTMLへ移動し現在使用している
HTMLの「」の行の直前に、以下を貼り付けます。
注意）ミスると大変なことになるので、右上の『HTMLの追加』をクリックし
新たな HTMLを追加し、そこにそれまで使用していた HTML から内容を
まるごとコピーするなどしてバックアップを取ってください。
これでアップロード作業は完了です。
適当にコードを入れて反応するか確認してください。
一応ダウンロードしてきたファイルの中にあるindex.htmlから拝借。
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
return "hi!";
}
</pre>
こんな感じで表記されたらOKです。
function helloSyntaxHighlighter()
{
return "hi!";
}
「言語名」には、表示したいソースコードの言語に応じて、
表右側の値をを指定します。「shBrushPlain.js」を
指定する場合は「plain」と入力する
「brush:」に指定する言語名
| 言語 | 「brush:」に指定する言語名 |
|---|
| HTML／XHTML／XML | html |
| CSS | css |
| JavaScript | js |
| PHP | php |
| Perl | perl |
注意）「改行HTMLタグ変換」の項目がデフォルトで「 改行は<br/>タグに変換する」
にチェックが入っています。「 改行は<br/>タグに変換する」にチェックが入っていると
うまく表示されませんので「改行を<br/>タグに変換しない 」に変更してください。
ただし文章の改行が自動で行われなくなるので<br/>タグを改行する位置に
入れる必要があります。
