外部サービスが止まっても最低限の動作ができるようなWebページを作る：SyntaxHighlighter編

イントロダクション

以前 SyntaxHighlighter の公式ホスティングサービスへの接続に失敗し、ページが読み込み中のまま表示されないという現象が発生したことがありました。

SyntaxHighlighter:エスケープした<br />のみ HTML のタグとして解釈されてしまう問題の解決策

SyntaxHighlighterにて、エスケープした<br />のみ、HTMLのタグとして解釈され、表示上改行になってしまう問題への対処方法がわかりました。

SyntaxHighlighter で装飾したコードを Chrome でコピーすると文字化けする

イントロダクション

このブログでは、ソースコードを見栄え良く表示するために SyntaxHighlighter を使っています。

SyntaxHighlighter で装飾したコード：

<script type="text/javascript">
<!--
    (function () {
        alert("Hello");
    })();
//-->
</script>

先日、何気なく SyntaxHighlighter で装飾した JavaScript のソースコードを Chrome でコピーして、実際に Blogger のWeb ページのソースに張り付けて動かしてみたところ、なぜか動きませんでした。

Chrome のデバッグ機能でソースコードをトレースしてみると、半角スペースに見えていた部分が、別のものになっていることがわかりました。

SyntaxHighlighterで装飾したソースコードを Blogger のエディタで編集するときの注意事項

以下のSyntaxHighlighterで装飾したソースコード(<pre>タグ内にコードを記載）を Blogger のエディタで編集するとします。

ソースコードをきれいに装飾して、WordやPowerPointでレポートや発表資料を作る:SyntaxHighlighter(3.x)

「SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする」シリーズとして、SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーして、各種アプリケーションに張り付けると、どのような結果になるのか見てきました。

「SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする」シリーズ

• Blogger編
• Word編
• Excel編
• PowerPoint編

以上の結果を踏まえて、ソースコードをきれいに装飾したまま、WordやPowerPointでレポートや発表資料を作る場合にはどのようにしたらよいか考えました。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーし、Excel に張り付けて成形する

記事「SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：Excel編」にて、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、Excel へ貼り付けた結果を紹介しました。

その時に、単純に Excel に張り付けただけでは表示が崩れてしまったので、その時に行った表示を成形する方法(5ステップ)を紹介します。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：PowerPoint編

記事「SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)」では、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、ソースコードとして利用できる形で簡単にコピーする方法を紹介しました。

今回は、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、各アプリケーションへ貼り付けるとどうなるかを紹介したいと思います。
今回は Microsoft PowerPoint 2010 に対して貼り付けを行います。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：Excel編

記事「SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)」では、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、ソースコードとして利用できる形で簡単にコピーする方法を紹介しました。

今回は、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、各アプリケーションへ貼り付けるとどうなるかを紹介したいと思います。
今回は Microsoft Excel 2010 に対して貼り付けを行います。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：Word編

記事「SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)」では、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、ソースコードとして利用できる形で簡単にコピーする方法を紹介しました。

今回は、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、各アプリケーションへ貼り付けるとどうなるかを紹介したいと思います。
今回は Microsoft Word 2010 に対して貼り付けを行います。

SyntaxHighlighter(3.x)で装飾されたソースコードを装飾ごとコピーする：Blogger編

記事「SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)」では、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、ソースコードとして利用できる形で簡単にコピーする方法を紹介しました。

今回は、SyntaxHighlighter(3.x系)で装飾された Web ページ上のソースコードを、装飾も含めてコピーして、各アプリケーションへ貼り付けるとどうなるかを紹介したいと思います。
今回は Blogger に対して貼り付けを行います。

SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)

Web ページを閲覧していると、以下のようなソースコードがきれいに装飾されて表示されているページを見かけることもあるかと思います。

JavaScript:カンマ演算子を使った複数の変数の宣言が全く別のものに見えて理解するのに時間がかかってしまった

JavaScript で一行で二つの変数を宣言し、値を代入する場合、以下の構文を使用します。

バグフィックス(1):SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布)

記事「ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布)」にて公開したスクリプトの一部にバグがあったため修正を行いました。

正規表現：SyntaxHighlighterのブラシ一覧をコンボボックスに変換する

SyntaxHighlighter のブラシ一覧(*1)をWebページのコンボボックスから選択できるようにしたいと思い、SyntaxHighlighter のブラシをコンボボックスの HTML に変換しました。

Webサービスリリース!<pre> Generator for SyntaxHighlighter - SyntaxHighlighter用の<pre>タグを作成するWebサービス

SyntaxHighlighter用の<pre>タグを作成するWebサービス

「<pre> Generator for SyntaxHighlighter」

の公開を開始しました!

ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布)の作業

はじめに

 記事「ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布)」にて行った作業内容を記載します。

ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布)

はじめに

SyntaxHighlighterを使用するとページに記載したソースコードをきれいに表示することができます。

しかし、SyntaxHighlighterを利用する場合、（当然ですが）外部のJavaScriptとスタイルシートを読み込む必要があり、その分表示が遅くなります。
従って、SyntaxHighlighterを使用しているページならその表示遅延は許容せざるを得ませんが、SyntaxHighlighterを使用していないページまでその表示遅延を許容する必要はありません。

そこで、SyntaxHighlighterの使用状況に応じて、読み込むSyntaxHighlighterのJavaScriptとスタイルシートを動的に変更する仕組みを考えてみました。


前回まででコンセプトコードの検証作業は終了したため、今回はそこで完成したスクリプトを他の人が使用できるように全てのブラシに対応して一般化したスクリプトを作成し、配布します。

2014/5/1 追記：------------------------------------------------

【重要】ブラシの指定時に次のように ブラシ名の次に ; が付くケースでうまく対応する JavaScript ファイルを読み込めないケースがあったため、バグフィックスを行いました。

<pre class="brush: plain;">

（バグフィックス詳細）

追記ここまで ------------------------------------------------------


作業過程は「ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布)の作業」にて公開しています。

ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(最適化したコードをBloggerに設置編)

追記：

タイトルが長かったため

「SyntaxHighlighter:ページの表示速度を改善するため、ページ内にSyntaxHighlighterを使用する箇所がある場合に、jsとcssを読み込むようにした」

を

「ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む」

に修正しました。

はじめに

SyntaxHighlighterを使用するとページに記載したソースコードをきれいに表示することができます。

しかし、SyntaxHighlighterを利用する場合、（当然ですが）外部のJavaScriptとスタイルシートを読み込む必要があり、その分表示が遅くなります。
従って、SyntaxHighlighterを使用しているページならその表示遅延は許容せざるを得ませんが、SyntaxHighlighterを使用していないページまでその表示遅延を許容する必要はありません。

そこで、SyntaxHighlighterの使用状況に応じて、読み込むSyntaxHighlighterのJavaScriptとスタイルシートを動的に変更する仕組みを考えてみました。


今回は前回 Blogger に設置した SyntaxHighlighter の動的必要最低限機能の読み込み JavaScript を最適化して、ページの読み込み速度の計測をしてみました。

ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(Bloggerに設置編)

追記：

タイトルが長かったため

「SyntaxHighlighter:ページの表示速度を改善するため、ページ内にSyntaxHighlighterを使用する箇所がある場合に、jsとcssを読み込むようにした」

を

「ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む」

に修正しました。

はじめに

SyntaxHighlighterを使用するとページに記載したソースコードをきれいに表示することができます。

しかし、SyntaxHighlighterを利用する場合、（当然ですが）外部のJavaScriptとスタイルシートを読み込む必要があり、その分表示が遅くなります。
従って、SyntaxHighlighterを使用しているページならその表示遅延は許容せざるを得ませんが、SyntaxHighlighterを使用していないページまでその表示遅延を許容する必要はありません。

そこで、SyntaxHighlighterの使用状況に応じて、読み込むSyntaxHighlighterのJavaScriptとスタイルシートを動的に変更する仕組みを考えてみました。


今回は前回作成した SyntaxHighlighter の動的読み込み JavaScript を 少し修正し、Blogger に設置してみました。

ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む

追記：

タイトルが長かったため

「SyntaxHighlighter:ページの表示速度を改善するため、ページ内にSyntaxHighlighterを使用する箇所がある場合に、jsとcssを読み込むようにした」

を

「ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む」

に修正しました。

はじめに

SyntaxHighlighterを使用するとページに記載したソースコードをきれいに表示することができます。

しかし、SyntaxHighlighterを利用する場合、（当然ですが）外部のJavaScriptとスタイルシートを読み込む必要があり、その分表示が遅くなります。
従って、SyntaxHighlighterを使用しているページならその表示遅延は許容せざるを得ませんが、SyntaxHighlighterを使用していないページまでその表示遅延を許容する必要はありません。

そこで、SyntaxHighlighterの使用状況に応じて、読み込むSyntaxHighlighterのJavaScriptとスタイルシートを動的に変更する仕組みを考えてみました。