サーバいらず版SyntaxHighlighterによるハイライト表示ﾃｷｽﾄ生成htmlのオンラインデモ

サーバが要らねえって言っときながらオンラインデモってどういうことなんだとお悩みの諸兄にまったく同感です。

まず、とりあえずミセロ、というお兄さんお姉さんにはこちら。

百聞は一見に如かずと申します。
ご覧いただいている隙に、例によって前置きです。

まず、サーバ不要ってどういう意味なのさ、というと、閲覧していただく方には整形(ハイライト)済みhtmlだけお示しして、ブログを読んでいただく方のため向けに別個にスクリプトダウンロード元サーバは用意する必要がありませんよ、という意味での「サーバ不要」です。
(駄文を配信していただくためのBloggerさんのhttpdは依然必要です)。

整形済みﾃｷｽﾄを作る場所はマイドキュメント内でも今回のデモのようにどこかのレンタルサーバでも、ﾌﾞﾗｳｻﾞがhtmlファイルを読み込める場所ならどこでも構いません。結局はあなたが利用しているﾌﾞﾗｳｻﾞが全部やります。

今回オンラインﾃﾞﾓを用意しましたのは、ワンクリックで見ることができて便利だから以上の意味はありません。
(ちょっと虫のいいお願いで恐縮ですが、万が一リンクしてくださるにしても、オンラインﾃﾞﾓへの直撃はご容赦くだされば幸いです。ちょっと買収劇がうるさい様子ですので引っ越しする可能性があります)

一度ページが読み込まれてしまうと、以後すべてあなたの計算機上で処理されますから、ページの読み込み元はハードディスクだろうがオンラインだろうが結果は同じことです。

さて、これまでの話を再確認させてください。

1. どうせ前処理が必要なら最初から全部やればいいんじゃない?。そうすればハイライト済みﾃｷｽﾄを見ていただく閲覧者に毎回SyntaxHighlighter一式の実行を求めなくていいじゃないのよ。
2. 実行を求めない以上、そもそも実行しないのだから掲載する先(この場合はBlogger)上でのSyntaxHighlighterの設定が不要(他にホスティングしてくれる先を探す必要がない)。
3. でもコピペとかBlogger特有の自動改行処理にはオンライン処理があればイイネ。
   これには閲覧者の計算機資源が必要ですがハイライト処理を行うよりはるかに軽量、かつ高速です。

とまあ、こういうテーマでこれまでの回でお話ししてまいりました。
で、そのテーマに沿って無意味なコードと駄文を書き連ねてまいりましたが、さすがにそろそろもう〆です。

気の早いお兄さんお姉さん向けに先にリンクしたオンラインﾃﾞﾓの使い方をご説明します。

以前にもざっとご説明しましたが、実際にモノを見ながらお読みいただくとより一層わかりやすいかと思いますので箇条書きで手順をご説明いたします。

1. スタイルを選択します。
   ﾃﾞﾌｫﾙﾄはDjangoになっていますので、適宜変更してください。
   これは使用するスタイルシートを選択することと同義です。(ハイライト用スタイル欄に選択したスタイルシートがそのまま出てきます)
   Djangoについては行毎に色が変わるような改変をcssに加えてあります。
   他のCSSもカスタマイズしたい場合はローカル環境での作業の方法をこちらにてご説明しております。
   htmlファイルはデモページのhtmlを保存すればそのままご利用いただけます。
2. 言語(ブラシ)を選択します。
   ﾃﾞﾌｫﾙﾄはC++になっていますので、適宜変更してください。
3. SyntaxHighlighterオプションを設定します。
   1. html-script
      phpやjavascriptなど、htmlと親和性の高い言語の場合htmlマークアップが出てくる場合が多いですが、それも同時に色付けします。
      他の大抵の言語では、このオプションをチェックすると怒られます。
   2. Blogger mode
      ソース中に存在する<br />が消えるなど、不可解な挙動をして愉しいので残しています。
      実際には、ここBlogger向けﾃｷｽﾄを生成する際にもチェックする必要はありません。
   3. auto-links
      チェックするとurlを自動でaタグで括ってくれます。
   4. 行番号
      行番号表示の有無です。チェックを外すと行番号が生成されません。
   5. TABサイズ
      \tの展開サイズです。時々[敬虔|狂信的]な[タブ排他|ホワイトスペース原理]主義者に出会いますが、何が彼らをそうさせたのでしょうか。tab便利です。
      このように幅をいつでも変えることができますもの。何はなくとも起き抜けで:set tabstop=4ですわよ奥様。
   6. その他の追加属性
      first-line: や highlight: など、さらに細かい設定を行います。各項目はホワイトスペース(全角を使う人がいるからこの世界やめられないよね)で区切ります。
      まあ、有体に言えばナマでSyntaxHighlighterで使う際にclassに指定する文字列ってことです。
   7. Bloggerで生成モードで更新してしまって表示が崩れた場合のお助け処理を追加※
      Bloggerで作成モードとhtmlモードを往来する場合に整形済みﾃｷｽﾄが崩れますが、再整形するスクリプトを追加します。
      詳細はひとつ前の記事をご参照ください。
   8. 「ダブルクリックでコピーモードに遷移」機能の再追加※
      コードをダブルクリックすると全選択されて簡単にコピーできるモードに遷移できるようにスクリプトを追加します。
      詳細はひとつ前の記事をご参照ください。
   9. ※印で必要な関数を整形済みhtml末尾に追加
      (※印は項番g,hに付与されています。)
      これらの処理を行うためのjavascriptライブラリを、ブログにコピペしやすいように整形済みhtml表示欄に、整形済みhtmlの末尾に追加して表示します。
      複数あってもただ転送量が大きくなるだけで動作には何ら差し支えありませんが、無駄ですので、記事中の一番最初に表示されるハイライト済みﾃｷｽﾄを生成時にチェックしてください。一つもなければ当然項番g,hの処理は動作しません。
      よくわからなければ、前述の通り動作には支障がないのですべての整形済みhtmlに付与してかまいません。同一関数名の関数は最後に読み込まれた関数で上書きされるだけなのでエラーにはなりませんし、Bloggerのように表示モードによる記事ごとの表示順とか月またぎによる表示の有無とかを考えるより、各ブログ記事においとけばいいと思います。小さいですし。
4. 上記を設定したら、いよいよ変換元テキスト入力欄:にハイライト元ソースを原本よりコピーしてください。
5. ハイライト実行ボタンを押してください。
6. 上記を行うと、箱が2つ現れます。
   ハイライト用スタイル、および、ハイライト済ﾃｷｽﾄです。
1. ハイライト用スタイル
    スタイルは、単にラジオボタンで選択したスタイルのcssファイルの内容をhead部やbody部に直接コピペできるようにしたものです。
   これは本文中にいくつもハイライト済みﾃｷｽﾄを配置する場合でも、1回だけで構いません。
   つまり、ハイライト済みﾃｷｽﾄと1対1で対応していません。htmlモードの先頭にコピーしておけばいいです。
2. ハイライト済みﾃｷｽﾄ
   これこそハイライトされた結果をhtml化した本命です。
   これをブログ中の最適な位置に適宜ペーストしてください。
   htmlﾃｷｽﾄなのですから作成モードで貼り付けて所期の効果が得られず七転八倒するような暇のつぶし方はあまりお勧めしません。
   htmlモードで張り付てください。
   前述の通り、オプションによっては末尾にjavascriptが付与されておりますので、作成モードに戻って編集する際にスクリプトを消してしまわないよう注意して下さい(Bloggerさんは編集の具合で簡単にscriptタグを消してくれるので、ペーストしたすぐ後の行を編集する場合は要注意です。scriptタグが消えると当然イベントハンドラの追加や改行除去処理は行われません)。
7. ハイライト処理済みhtml版プレビュー
   あなたのブログ上でどう見えるかをプレビューできます。
   javascriptが絡むオプションを指定した場合の挙動の確認もここで行います(Blogger用改行除去のデモは用意していませんので現状ではダブルクリック時の挙動をご確認いただけます)。まあ、除去デモを用意しても一瞬で終わってるので見えませんが。

現状、こんなところです。

文字にするとむやみに長いですねえ。

え?画像付きじゃないとわからない?

そりゃお気の毒です。

以上です。