Entries

SyntaxHighlighter 3.0.83 を FC2 で動かす際の最もシンプルな設定方法

自分のブログに行番号のついたソースコードを表示させようと思い、
SyntaxHighlighter3.0.83 を使おうとしてネットで調べながら
環境設定をしたのですが、なかなかうまくいきません。
その後調査を続けて、なんとか(HTML と JavaScriptだけですが)
表示させることができましたので備忘録として書いておきます。
とりあえず言語を限定してでもソースコードを表示させたい人には
役に立つ記事になると思います。ただし動作確認はあくまでもFC2で行った
だけなので、FC2以外のサイトでの動作は保証いたしかねます。

経緯:
ネットで色々と調べて真似して環境設定してみたのですが、
どうしてもうまくいきません。行番号が表示されないんです。
ここで基本に立ち返ろうと思い、ダウンロードして解凍したファイルを見た所、
解凍フォルダの直下にindex.htmlがあったので、これを動かしてみたら
JavaScript のソースがちゃんと理想の形でブラウザに表示されました。
このファイルを開き、このファイルに書かれている内容を基本に実現を目指しました。

このファイルの内容で必要と思われる箇所をそのまま写しただけでは
ソース中の改行コードが<br />という形で表示されてしまいましたので、
この問題に関してだけは他のサイトから情報を集めて作りました。

ソースはこんな感じです。ブログのポータルを作っているテンプレートの、
<head>~</head>の中の最後に以下のソースを追加します。
(ソースは、最も単純な形式と思われるSyntaxHighlighter 上に表示させています。)


<script type="text/javascript" src="http://blog-imgs-XX.fc2.com/a/b/c/tadpolizemedia/shCore.js"></script>

<script type="text/javascript" src="http://blog-imgs-XX.fc2.com/a/b/c/tadpolizemedia/shBrushJScript.js"></script>

<script type="text/javascript" src="http://blog-imgs-XX.fc2.com/a/b/c/tadpolizemedia/shBrushXml.js"></script>

<link type="text/css" rel="stylesheet" href="http://blog-imgs-XX.fc2.com/a/b/c/tadpolizemedia/shCoreDefault.css"/>

<script type="text/javascript">SyntaxHighlighter.config.bloggerMode=true;</script>

<script type="text/javascript">SyntaxHighlighter.all();</script>



このソースで使われている3つのjsファイルと1つのCSSファイル,
shCore.js
shBrushJScript.js
shBrushXml.js
shCoreDefault.css

はアップロードしなくてはいけません。これらのファイルは
ダウンロードして解凍したSyntaxHighligter_3.0.83以下のフォルダ"scripts"と
"styles"の下から探して、画像ファイルをアップする時と同様のやり方でアップロードします。

ただ、HTMLファイル中に書く必要のある、アップロードしたファイルの場所について
調べる方法についてだけは書いておきます。例えば、ソース中の
http://blog-imgs-XX.fc2.com/a/b/c/tadpolizemedia/shCore.js の
"blog-imgs-XX.fc2.com/a/b/c/tadpolizemedia/" の部分の調べ方です。

ファイルをアップロードする画面からファイルをアップロードした後、
"表示"ボタンで確認することができます。

アップデートしたファイルの場所を調べる方法

FC2でHTML、XML、JavaScript あたりを表示させるのであればこれだけの設定で
表示されます。(2011.9.11動作確認)

あっ、そうそう、
ブログの記事中にHTMLファイルを載せる前に、HTMLのサニタイズ処理が必要になります。
HTMLタグ変換ツールあたりを使いましょう。
http://www.samurai-logic.com/php/crypt/html.php

サニタイズしたら、そのデータを、
<pre class="brush:html;"> ~ </pre>の中に記載する
ことによって、ブログの記事中に行番号付きのソースコードを表示できる
ようになります。この辺の説明は他のブログに譲りましょう。

上記以外の言語で表示させる場合や、更なるカスタマイズをしたい方は、
更にイジらなくてはいけないので、他のサイトを参考にして頑張ってください。

スポンサーサイト
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://tadpolizemedia.blog118.fc2.com/tb.php/142-e5fcc6ca

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

Appendix

プロフィール

 二代目松四郎

Author: 二代目松四郎


「カメラと動画(+スチル写真)」
「音響と音楽」
「プログラミング」
を主なテーマに活動しています。
映画館と美術館と音楽ホールと
古い街並みが私の学校。

宮城県仙台市在住。

カテゴリー

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Counter