ということで実験です。
デザインモード
onをクリックすると確かにブラウザがエディタになりますね。挙動はブラウザによって違うみたいですが…。
document.designMode = 'on'; とするだけなので、非常に楽です。C#からブラウザを使えば、結果的にテキストエディタも作れそう。
ただ、水平タブの処理は細かくできそうにないので、その辺りが難点でしょうか。
マウス キーボードセンターでエラーコード1603
マイクロソフトのマウスにはIntelli Pointというユーティリティがあり、ボタンの設定などが出来るようになっています。自分の場合、サイドボタンにコピーや貼り付けなどを割り振って使うと、非常に便利で気に入って使っていたのですが、そのIntelli PointがWindows 起動時にエラーを出して、Intelli Pointが再起動するようになりました。
起動時に一度再起動すれば、それ以後は何事も無く動作するので暫く放っておいたのですが、Intelli Pointが新しくなったらしいので新バージョンをインストールしてみることにしました（新バージョンは、マウスとキーボードが統一され、大きく変更されたとか）。
すると…
無事ロゴが出るものの…
マイクロソフトのマウスを挿していないので、当然デバイスが見つかりません。
そこでマウスを挿してみますが動きません。
デバイスマネージャーを見てみるとこのようになっています。
このMicrosoft USB IntelliMouse Explorer 3.0のドライバを一旦無効にし有効にするとマウスは使えるようになり、マウスキーボードセンターでも認識されるのですが、サイドボタンがデフォルトのままで設定が反映されません。
ここで、IME3.0のドライバを削除してマウスを挿し直すと、今度はUnknown Deviceとして認識され、更に削除・挿し直しを繰り返していくうちに、何故かドライバが適用され、サイドボタンの設定も有効になりました(この辺り、少し記憶が曖昧です)。
(IntelliPoint)の表示が出ていると専用のドライバが適用されているようで、ドライバの詳細は
このようになっています。(IntelliPoint)の表示が出ていない時は、point64.sysが無かったので、このpoint64.sysがマウスキーボードセンターのドライバのようです。しかし、このpoint64.sysはデジタル署名が認識されておらず、何だか変な感じです。
再現性があるのかと、もう一度ドライバを削除しやり直してみましたが、今度は認識されることはありませんでした。
直接ドライバを指定して読み込ませようとしても、”ドライバは見つかりましたが指定されたパスが見つかりません”と良く分からないエラーメッセージが出てインストール出来ません(このことからインストール時のエラーは、ドライバ適用時にこのエラーが発生して、1603エラーとして通知しているのだと思います)。
どうやっても出来なくなってしまったので、マウス キーボードセンターのインストールは諦め、Intelli Point8.2をダウンロードしてきてインストールしてみましたが、コチラも同じ1603エラーが出てインストール出来ません。
元々使っていたIntelli Pointのバージョンを忘れてしまっているのですが、その時はなんの問題もなくインストール出来た記憶があるので、古いバージョンならと今度はIntelli Point7.0をインストールしてみました。
そうすると、すんなりインストール成功。
ドライバを見てみると、
今度はpoint64.sysがpoint64k.sysになっており、デジタル署名も認識されています。
結局、新しいマウス キーボードセンターでは上手く行かず、古いIntelli Pointなら問題なく動作するという結果になりました。
新しくなったマウス キーボードセンターに拘るあまり、ドライバの削除やら再起動やらを延々繰り返して無駄に時間を浪費してしまい、ホントに疲れました(要は起動時の不正終了が無くなれば良かっただけなので、正常動作するなら最初から古いバージョンでも良かった訳です)。
Windows7 x64で、ずっとIntelli Pointは使えていたので今回も問題なく使えると思っていたのですが、途中からこのマウスは非対応になってしまったのでしょうか。サイトを見てもそれらしい記述は見つけられませんでしたが…。
またドライバの削除・マウスの再認識を繰り返して、使えるようになったのも良く分からない話ではあります。
<追記>このあと後日談が出来ました。
起動時に一度再起動すれば、それ以後は何事も無く動作するので暫く放っておいたのですが、Intelli Pointが新しくなったらしいので新バージョンをインストールしてみることにしました（新バージョンは、マウスとキーボードが統一され、大きく変更されたとか）。
すると…
こんなエラーが。
調べてみると、Intelli Point関係でエラーコード1603でインストール出来ないという事例はいくつかあったものの、解決に至った事例は見つけ出せませんでした。嫌な予感がよぎります。
しょうがないので、色々試した結果、マイクロソフトのマウスを抜いておけば、インストールだけは完了することに気付きました(マウスが無くなると操作が面倒になるので、別途違うメーカーのマウスを挿して、そちらで操作はしています)。
調べてみると、Intelli Point関係でエラーコード1603でインストール出来ないという事例はいくつかあったものの、解決に至った事例は見つけ出せませんでした。嫌な予感がよぎります。
しょうがないので、色々試した結果、マイクロソフトのマウスを抜いておけば、インストールだけは完了することに気付きました(マウスが無くなると操作が面倒になるので、別途違うメーカーのマウスを挿して、そちらで操作はしています)。
無事ロゴが出るものの…マイクロソフトのマウスを挿していないので、当然デバイスが見つかりません。
そこでマウスを挿してみますが動きません。
デバイスマネージャーを見てみるとこのようになっています。
ここで、IME3.0のドライバを削除してマウスを挿し直すと、今度はUnknown Deviceとして認識され、更に削除・挿し直しを繰り返していくうちに、何故かドライバが適用され、サイドボタンの設定も有効になりました(この辺り、少し記憶が曖昧です)。
(IntelliPoint)の表示が出ていると専用のドライバが適用されているようで、ドライバの詳細は
再現性があるのかと、もう一度ドライバを削除しやり直してみましたが、今度は認識されることはありませんでした。
直接ドライバを指定して読み込ませようとしても、”ドライバは見つかりましたが指定されたパスが見つかりません”と良く分からないエラーメッセージが出てインストール出来ません(このことからインストール時のエラーは、ドライバ適用時にこのエラーが発生して、1603エラーとして通知しているのだと思います)。
どうやっても出来なくなってしまったので、マウス キーボードセンターのインストールは諦め、Intelli Point8.2をダウンロードしてきてインストールしてみましたが、コチラも同じ1603エラーが出てインストール出来ません。
元々使っていたIntelli Pointのバージョンを忘れてしまっているのですが、その時はなんの問題もなくインストール出来た記憶があるので、古いバージョンならと今度はIntelli Point7.0をインストールしてみました。
そうすると、すんなりインストール成功。
ドライバを見てみると、
今度はpoint64.sysがpoint64k.sysになっており、デジタル署名も認識されています。
結局、新しいマウス キーボードセンターでは上手く行かず、古いIntelli Pointなら問題なく動作するという結果になりました。
新しくなったマウス キーボードセンターに拘るあまり、ドライバの削除やら再起動やらを延々繰り返して無駄に時間を浪費してしまい、ホントに疲れました(要は起動時の不正終了が無くなれば良かっただけなので、正常動作するなら最初から古いバージョンでも良かった訳です)。
Windows7 x64で、ずっとIntelli Pointは使えていたので今回も問題なく使えると思っていたのですが、途中からこのマウスは非対応になってしまったのでしょうか。サイトを見てもそれらしい記述は見つけられませんでしたが…。
またドライバの削除・マウスの再認識を繰り返して、使えるようになったのも良く分からない話ではあります。
<追記>このあと後日談が出来ました。
2012/10/25
Synatax Highlighter のハイライト処理
ソースも付いてることなので、もう少し中身の処理を追ってみました。
javascript自体、まだまだよく分かっていないレベルですが、デバッガが優秀なので、私のようなjavascript初心者でも処理は追っていけますね。
そのうち、キーワードをハイライト処理するようなエディタを作ってみたいと思っているので、その勉強も兼ねて。
まずは、処理の開始から。
てっきり、このall()メソッドを呼び出すことで処理が開始されると考えていましたが、単にwindowオブジェクトのloadイベントで実行するようにメソッドを仕掛けていただけでした。autoloader使用時も、all()メソッドはスクリプトの読み込み終了のフラグを立てるだけで、ハイライト処理へは、スクリプト読み込み完了のイベントから飛んでいます。
処理が移ると、brushファイルのスクリプトを呼び出し、正規表現パターンを配列として用意します(例えば、"\/\/.*$"のパターンは//コメント抽出用、等)。
正規表現はjavascriptだと6種類、c#だと9種類のパターンが定義されていました。
意外に少ない印象です。
そして、そのパターンを使ってコードにマッチしていく部分を調べるのですが、ここの処理も自分の予想と違い、大変勉強になりました。
予想だとコードを1行ずつ読み込んで、マッチするキーワードを全てのパターンで探すのかと思っていたのですが、実際は”各正規表現パターンずつ”コードの最初から最後まで一通り調べ、マッチする部分を全てピックアップしていくという処理になっています。
例えば、//コメントの部分だけ、まず全部抜き出す訳です。抜き出したキーワードはオブジェクトに格納し、抜き出したコードの位置や抜き出した文字の長さ、適用するスタイル情報等も格納します。そしてそのオブジェクトは配列にして追加していきます。
その次は、/**/コメントの部分だけ、次は""の文字列部分だけ…という風に用意された正規表現パターンを順番に使用し、該当する部分を全て抜き出します。
最後に、そうやって抜き出したキーワード(格納用オブジェクト)の配列を出現順にソートして(格納している文字列の開始位置を使って)、準備完了です。
さて、準備が出来たらいよいよハイライト処理の本番です。
ここでは【ハイライトしない文字列+ハイライトする文字列】というHTMLの作成が一つの処理単位になっていました。
準備で抜き出したキーワードの格納用オブジェクトを一つ取り出します。
一つ前のキーワードの終了位置から、今取り出したキーワードの開始位置まではハイライトしない文字列になるので、該当する文字列をinnerHTMLから取り出し(無い場合もアリ)、通常色で表示するためcodeタグで括り、スタイル適用。次にハイライトする文字列は既に取り出しているので、それをcodeタグで括り、格納用オブジェクトにある情報を元にスタイルを適用。最後に次のハイライトしない文字列を取得するための文字位置を更新。
これを抜き出したキーワード分全て繰り返すと、ハイライトされたHTMLが完成しているという塩梅です。
ハイライト済みのHTMLは改行を目印に行単位に分けられるので、必要があれば1行ずつdivタグで括り、行番号のスタイルも適用しています。
細かい処理(タブの処理や、連続スペースの処理等)は省いて書きましたが、大雑把にこの様な処理になっていました。
こうやってソースを追ってみると、自分の発想とは違う処理が行われていて目から鱗、とても勉強になります。
そのうち、キーワードをハイライト処理するようなエディタを作ってみたいと思っているので、その勉強も兼ねて。
SyntaxHighlighter.all();
てっきり、このall()メソッドを呼び出すことで処理が開始されると考えていましたが、単にwindowオブジェクトのloadイベントで実行するようにメソッドを仕掛けていただけでした。autoloader使用時も、all()メソッドはスクリプトの読み込み終了のフラグを立てるだけで、ハイライト処理へは、スクリプト読み込み完了のイベントから飛んでいます。
処理が移ると、brushファイルのスクリプトを呼び出し、正規表現パターンを配列として用意します(例えば、"\/\/.*$"のパターンは//コメント抽出用、等)。
意外に少ない印象です。
そして、そのパターンを使ってコードにマッチしていく部分を調べるのですが、ここの処理も自分の予想と違い、大変勉強になりました。
予想だとコードを1行ずつ読み込んで、マッチするキーワードを全てのパターンで探すのかと思っていたのですが、実際は”各正規表現パターンずつ”コードの最初から最後まで一通り調べ、マッチする部分を全てピックアップしていくという処理になっています。
例えば、//コメントの部分だけ、まず全部抜き出す訳です。抜き出したキーワードはオブジェクトに格納し、抜き出したコードの位置や抜き出した文字の長さ、適用するスタイル情報等も格納します。そしてそのオブジェクトは配列にして追加していきます。
その次は、/**/コメントの部分だけ、次は""の文字列部分だけ…という風に用意された正規表現パターンを順番に使用し、該当する部分を全て抜き出します。
最後に、そうやって抜き出したキーワード(格納用オブジェクト)の配列を出現順にソートして(格納している文字列の開始位置を使って)、準備完了です。
ここでは【ハイライトしない文字列+ハイライトする文字列】というHTMLの作成が一つの処理単位になっていました。
準備で抜き出したキーワードの格納用オブジェクトを一つ取り出します。
一つ前のキーワードの終了位置から、今取り出したキーワードの開始位置まではハイライトしない文字列になるので、該当する文字列をinnerHTMLから取り出し(無い場合もアリ)、通常色で表示するためcodeタグで括り、スタイル適用。次にハイライトする文字列は既に取り出しているので、それをcodeタグで括り、格納用オブジェクトにある情報を元にスタイルを適用。最後に次のハイライトしない文字列を取得するための文字位置を更新。
これを抜き出したキーワード分全て繰り返すと、ハイライトされたHTMLが完成しているという塩梅です。
ハイライト済みのHTMLは改行を目印に行単位に分けられるので、必要があれば1行ずつdivタグで括り、行番号のスタイルも適用しています。
こうやってソースを追ってみると、自分の発想とは違う処理が行われていて目から鱗、とても勉強になります。
2012/10/17
javascriptの動的読み込み
さて、使い方を纏めてみたSyntax Highlighterですが、動的にbrushファイルを読み出すってどうやっているんだろうかと思い、ソースを追ってみました。
javascript自体良く分かっていないので調べながらです…。
書き換えただけでは、読み込んでくれないのでは？と思いましたが、大丈夫のようです。
試しに実験してみました。
まず外部スクリプトとして、以下のファイルを作成。
ただし元のshAutoloader.jsのソースでは、script.onloadが以下の様になっています。
その場合、onreadystatechangeを使ってスクリプト読み込み完了時の処理をして、更にIEにはメモリリークのバグがあるので、上記のような処理を行なっているということらしいです(javascript自体を調べながらというレベルなので詳細は分かりませんが…)。
IE9で実験してみると、onloadだけでも動作したのでIEのバージョンでも違うんでしょうね。
javascript自体良く分かっていないので調べながらです…。
- まず最初のpath関数は@をアドレスに置換して配列にしてSyntaxHighlighter.autoloaderメソッドに渡す。
- SyntaxHighlighter.autoloaderメソッド中にpreタグ内を取得して、そこからbrush名を抽出。
- brush名から配列のアドレスを引き出す。
- アドレスを元にHTMLScriptElementオブジェクトを作成、読み込み完了時に動作するように、onloadに関数を設定。
- bodyにappendChildメソッドで追加。
書き換えただけでは、読み込んでくれないのでは？と思いましたが、大丈夫のようです。
試しに実験してみました。
まず外部スクリプトとして、以下のファイルを作成。
function test()
{
alert("test");
}
そして、表示しているページで以下のスクリプトを実行。
<script type="text/javascript">
var script = document.createElement('script');
script.src = 'js1.js';
script.type = 'text/javascript';
script.language = 'javascript';
script.onload = function()
{
test();
};
document.body.appendChild(script);
</script>
ちゃんと外部ファイルのtest()が呼ばれて、"test"とアラートが出ました。ただし元のshAutoloader.jsのソースでは、script.onloadが以下の様になっています。
script.onload = script.onreadystatechange = function()
{
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete'))
{
//省略
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
script.parentNode.removeChild(script);
}
};
調べてみると、script.onloadはIEの場合反応しないとか。その場合、onreadystatechangeを使ってスクリプト読み込み完了時の処理をして、更にIEにはメモリリークのバグがあるので、上記のような処理を行なっているということらしいです(javascript自体を調べながらというレベルなので詳細は分かりませんが…)。
IE9で実験してみると、onloadだけでも動作したのでIEのバージョンでも違うんでしょうね。
2012/10/13
Syntax Highlighter 【スタイル】
バージョンは3.0.83を元に書いています。
コードの表示は正常ですが、行番号だけ折り返して表示されています。回避策として、以下の定義が挙げられていました。
※テーマはDefaultを使用しています。
Chrome用の修正
現状ではChromeで行番号の表示が狂ってしまう症状があります。コードの表示は正常ですが、行番号だけ折り返して表示されています。回避策として、以下の定義が挙げられていました。
.syntaxhighlighter table td.gutter .line
{
padding: 0 5px !important;
}
その他
後はこのブログでの設定を書いておきます。その都度書き足したりして、意味のない定義をしていたり、重複してたりするかも知れませんが、クラス名程度でも参考にどうぞ。※テーマはDefaultを使用しています。
.syntaxhighlighter
{
overflow-y: hidden !important;
border: 1px solid #ccc !important;
}
.syntaxhighlighter div,
.syntaxhighlighter span,
.syntaxhighlighter code,
.syntaxhighlighter textarea
{
font-size:12px !important;
font-family: "Consolas", "monospace" !important;
}
フォントを等幅フォントで選んでいたのですが、何故か等幅にならないと悩んでしまいました。
boldで表示された時に幅が変化する等幅フォントと変化しない等幅フォントがあるんですね。
.syntaxhighlighter textarea
{
font-size: 13px !important;
line-height: 13px !important;
margin-top: -1px !important;
}
.syntaxhighlighter .line.alt1
{
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-bottom-color: rgb(240,240,240) !important;
background-color: white !important;
}
.syntaxhighlighter .line.alt2
{
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-bottom-color: rgb(240,240,240) !important;
background-color: white !important;
}
.syntaxhighlighter .gutter
{
color: rgb(175, 175, 175) !important;
}
.syntaxhighlighter .gutter .line
{
border-right: 3px solid rgb(240,240,240) !important;
}
.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2
{
background-color: rgb(255, 255, 223) !important;
}
.syntaxhighlighter .gutter .line.highlighted
{
background-color: rgb(255, 255, 223) !important;
color: black !important;
}
.syntaxhighlighter table caption
{
color: rgb(45,103,22) !important;
background-color: rgb(173,201,248) !important;
text-align: left !important;
padding: 2px !important;
line-height: 1em !important;
}
.syntaxhighlighter a:hover
{
background-color: rgb(204, 204, 255) !important;
}
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea
{
line-height: 1em !important;
}
おまけ
Syntax Highlighterのコード部分をダブルクリックすると、テキストエリアになってコードのコピーが簡単に出来ます。ただし、その際半角スペースが でコピーされるので、問題が少しあります。
2012/10/12
Syntax Highlighter 【設定】
バージョンは3.0.83を元に書いています。
Syntax Highlighterでは幾つかの設定が出来ます。
一覧と簡単な説明は以下の通りです。
preタグの中に
テスト<br />テスト
と記述すればこの様に表示が変わります。
bloggerMode = true時は、preタグ中に記述したコードの中の改行タグを実際の改行として扱う様になります。公式サイトでは、Bloggerならtrueにするようにと書かれていますが、trueにしなくとも問題無いみたいです。
Bloggerを始めたばかりで詳しくは知りませんが、少し前まではHTMLの貼り付けで改行があった場合、自動で改行の<br />タグが付加されたらしいので、その対策で<br />を改行として扱うモードがあるのかなと想像しています。
ただ今は、オプションで改行時の自動<br />付加は選択可能ですし、自動で<br />を付加する設定にしても、preタグやCDATAセクション内では自動的に<br />を付けることは無いみたいなので、Bloggerでもfalseのままで良いのではないでしょうか？（良く分かりません…)
<br />が付加されるタイプのブログを使用している場合等、<br />で問題が出る場合に有効な設定だと思われます。
公式サイトでは行末の<br />を無視すると書いてある様なのですが、行末で無くても全て無視するみたいです。この機能も、bloggerModeと同じく<br />タグ関係で問題があった場合に試してみると良いと思います。
Syntax Highlighterでは個別にパラメータを指定して行番号やツールバーの表示・非表示の切り替え等が出来ますが、記述しない場合デフォルト値が使われます。
またそれらの値のデフォルト値は、自分で設定する事が出来ます。
このパラメータについて、有用な使い方が良く分かりません。背景色等を定義したスタイルを追加しても、各要素で再定義される事が多い為、デザインを大きく変更出来ない様です。細かく変更出来るなら、preタグ毎にクラスを追加して1ページ中に違うデザインのコード表示が出来るのかなと思ったのですが(良く分かっていないだけかも…)。
preタグにタイトルが記述してあればタイトルを表示し、タイトルが無ければstrings.expandSourceに設定した文字列を表示します。この表示はtoolbarが有効になっている必要があります。
コードの開始行番号を設定します。
公式サイトの説明が分かりにくいので少し書きますと、スマートタブをtrueにしたときは、タブの後の文字位置は全行揃います。通常タブといえばこちらの動作を思い浮かべると思います。
一方、スマートタブをfalseにすると、位置に関係なくタブ自体がタブサイズのスペースに変換されるだけの動作になります。
どちらを設定しても、Syntax Highlighterで表示されるときにタブはスペースに変換される様です。
上記のSyntaxHighlighter.configやSyntaxHighlighter.defaultsの設定が済んだ後に、 SyntaxHighlighter.all();を実行します。
class中で指定したbrushに続いて、セミコロンで繋ぎ、パラメータ名: 値のフォーマットで記述します。パラメータに順番は無い様です。
どちらを使うにしろ一長一短ある様です。
ここまでで、設定に関する情報は終わりです。次はデザインについてです。
設定
SyntaxHighlighter.configSyntax Highlighterでは幾つかの設定が出来ます。
一覧と簡単な説明は以下の通りです。
| 名前 | デフォルト値 | 説明 |
| bloggerMode | false | コード中の<br />を実際の改行として扱う |
| strings | Object | 各種メッセージの定義 |
| stripBrs | false | コード中の<br />の無視 |
| tagName | "pre" | ターゲットのタグを変更する |
bloggerMode (表へ戻る)
SyntaxHighlighter.config.bloggerMode = true;このモードをtrueにすると、preタグの中(若しくはscriptタグ使用時のCDATAセクション)の<br />タグの扱いが変わります。
preタグの中に
テスト<br />テスト
と記述すればこの様に表示が変わります。
bloggerMode = true時は、preタグ中に記述したコードの中の改行タグを実際の改行として扱う様になります。公式サイトでは、Bloggerならtrueにするようにと書かれていますが、trueにしなくとも問題無いみたいです。
Bloggerを始めたばかりで詳しくは知りませんが、少し前まではHTMLの貼り付けで改行があった場合、自動で改行の<br />タグが付加されたらしいので、その対策で<br />を改行として扱うモードがあるのかなと想像しています。
ただ今は、オプションで改行時の自動<br />付加は選択可能ですし、自動で<br />を付加する設定にしても、preタグやCDATAセクション内では自動的に<br />を付けることは無いみたいなので、Bloggerでもfalseのままで良いのではないでしょうか？（良く分かりません…)
<br />が付加されるタイプのブログを使用している場合等、<br />で問題が出る場合に有効な設定だと思われます。
strings (表へ戻る)
エラーメッセージ等を変更できます。| 名前 | デフォルト値 | 説明 |
| expandSource | "+ expand source" | タイトルを設定せずに折りたたんだ時に表示される |
| help | "?" | 右上に出るツールバーにマウスオーバーすると表示される文字 |
| alert | "SyntaxHighlighter\n\n" | エラーが発生した時に出るウィンドウに表示される。他のnoBrushやbrushNotHtmlScriptのメッセージと組み合わされる |
| noBrush | "Can't find brush for:" | brushが読み込めなかった時に表示される |
| brushNotHtmlScript | "Brush wasn't made for html-script option:" | HTML混在モードの時に、読み込んだbrushがそのモードに対応していない時に表示される |
SyntaxHighlighter.config.strings.expandSource = "+展開します"; SyntaxHighlighter.config.strings.noBrush = "brushファイルを読み込めません。";
stripBrs (表へ戻る)
SyntaxHighlighter.config.stripBrs = true;bloggerModeでは、preタグ中の<br />を実際の改行として扱いましたが、こちらはpreタグ中の<br />を無視し、表示もしません。
公式サイトでは行末の<br />を無視すると書いてある様なのですが、行末で無くても全て無視するみたいです。この機能も、bloggerModeと同じく<br />タグ関係で問題があった場合に試してみると良いと思います。
tagName (表へ戻る)
コードを表示するタグを変更します。通常はpreタグですが、これを変更することにより、例えばh6タグ内に書かれた文字を整形して表示する、なんてことが出来ます。その時はpreタグは通常の動作に戻ります。SyntaxHighlighter.config.tagName = "h6";
パラメータのデフォルト値設定
SyntaxHighlighter.defaultsSyntax Highlighterでは個別にパラメータを指定して行番号やツールバーの表示・非表示の切り替え等が出来ますが、記述しない場合デフォルト値が使われます。
またそれらの値のデフォルト値は、自分で設定する事が出来ます。
| 名前 | デフォルト値 | 説明 |
| auto-links | true | コード内アドレスにリンクを張る |
| class-name | '' | SyntaxHighlighterの全要素にクラスを追加する |
| collapse | false | 折りたたみ表示をする |
| first-line | 1 | 開始行番号を設定する |
| gutter | true | 行番号を表示する |
| highlight | null | ハイライト行を設定する |
| html-script | false | コードをHTMLと他言語の混在として扱う |
| smart-tabs | true | スマートタブを使用する |
| tab-size | 4 | タブサイズの設定をする |
| toolbar | true | ツールバーを表示する |
auto-links (表へ戻る)
コード内に書かれたアドレスにリンクを張るかどうかどうかの設定です。厳密には知りませんが、凡そ://と書かれて前後にアドレスに使用可能な文字列があればアドレスと判断しているみたいです。SyntaxHighlighter.defaults['auto-links'] = true;
<script language="javascript" type="text/javascript"> var a = "https://hogehoge.hoge.hoge/"; </script> http://hogehoge.hoge.hoge/ ftp://hogehoge.hoge.hoge/ hoge://hogehoge.hoge.hoge +://a _://あ _://h あ://st ://
<script language="javascript" type="text/javascript"> var a = "https://hogehoge.hoge.hoge/"; </script> http://hogehoge.hoge.hoge/ ftp://hogehoge.hoge.hoge/ hoge://hogehoge.hoge.hoge +://a _://あ _://h あ://st ://
class-name (表へ戻る)
SyntaxHighlighter.defaults['class-name'] = 'test';SyntaxHighlighterの全要素にスタイルを追加します。スペースで複数追加できます。
このパラメータについて、有用な使い方が良く分かりません。背景色等を定義したスタイルを追加しても、各要素で再定義される事が多い為、デザインを大きく変更出来ない様です。細かく変更出来るなら、preタグ毎にクラスを追加して1ページ中に違うデザインのコード表示が出来るのかなと思ったのですが(良く分かっていないだけかも…)。
collapse (表へ戻る)
SyntaxHighlighter.defaults['collapse'] = true;折りたたみ表示を設定します。
preタグにタイトルが記述してあればタイトルを表示し、タイトルが無ければstrings.expandSourceに設定した文字列を表示します。この表示はtoolbarが有効になっている必要があります。
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
first-line (表へ戻る)
SyntaxHighlighter.defaults['first-line'] = 50;
コードの開始行番号を設定します。
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
gutter (表へ戻る)
行番号の表示・非表示を設定します。trueで行番号を表示します。SyntaxHighlighter.defaults['gutter'] = true;
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
highlight (表へ戻る)
ハイライト行を設定します。存在しない行を指定してもエラーにはなりません。SyntaxHighlighter.defaults['highlight'] = [1, 3];
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
html-script (表へ戻る)
コードがHTMLと他言語の混在時に指定します。これを使用する際には、shBrushXml.jsを読み込んでおく必要あります。このパラメータを使用出来る言語は決まっていて、対応しない言語と同時使用するとエラーが表示されます。SyntaxHighlighter.defaults['html-script'] = true;
<!-- javascript --> <script language="javascript" type="text/javascript"> SyntaxHighlighter.all(); </script> <!-- HTML --> <p> test </p>
<!-- javascript --> <script language="javascript" type="text/javascript"> SyntaxHighlighter.all(); </script> <!-- HTML --> <p> test </p>
smart-tabs (表へ戻る)
スマートタブを使用するかしないかの設定をします。SyntaxHighlighter.defaults['smart-tabs'] = true;
1 1 1 1 12 12 12 12 123 123 123 123 1234 1234 1234 12345 12345 12345
1 1 1 1 12 12 12 12 123 123 123 123 1234 1234 1234 12345 12345 12345
公式サイトの説明が分かりにくいので少し書きますと、スマートタブをtrueにしたときは、タブの後の文字位置は全行揃います。通常タブといえばこちらの動作を思い浮かべると思います。
一方、スマートタブをfalseにすると、位置に関係なくタブ自体がタブサイズのスペースに変換されるだけの動作になります。
どちらを設定しても、Syntax Highlighterで表示されるときにタブはスペースに変換される様です。
tab-size (表へ戻る)
タブサイズの設定をします。smart-tabs = ture時のタブサイズ1と2が同じように見えますが、これで正常です。SyntaxHighlighter.defaults['tab-size'] = 2;
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
toolbar (表へ戻る)
ツールバーの表示・非表示を設定します。collapseをtrueにする時は、toolbarをfalseにする事は出来ません。SyntaxHighlighter.defaults['toolbar'] = true;
<script language="javascript" type="text/javascript"> SyntaxHighlighter.all(); </script>
<script language="javascript" type="text/javascript"> SyntaxHighlighter.all(); </script>
上記のSyntaxHighlighter.configやSyntaxHighlighter.defaultsの設定が済んだ後に、 SyntaxHighlighter.all();を実行します。
タグ中でのパラメータの指定
パラメータの詳細は上記の通りですが、通常はdefaultsの値を変更するよりもタグに直接指定するほうが便利だと思います。ローカルな設定になるので、他に貼りつけたSyntax Highlighterの表示が変更されることはありません。class中で指定したbrushに続いて、セミコロンで繋ぎ、パラメータ名: 値のフォーマットで記述します。パラメータに順番は無い様です。
<pre class="brush: js; highlight: [6,7]; tab-size: 2; toolbar: false" title="sample">
scriptタグを使ったコードの貼り付け
解説はpreタグで貼り付けることを前提に書いてありますが、scriptタグでも貼り付ける事が出来ます。<script type="syntaxhighlighter" class="brush: c-sharp"><![CDATA[
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
]]></script>
2～10行のハイライト部分にコードを記述します。
どちらを使うにしろ一長一短ある様です。
| 利点 | 欠点 | |
| preタグ | タグ中のコードは非表示にならない。 | <>&"'の文字をエスケープする必要がある。 |
| scriptタグ | 殆どの文字をそのまま記述できる。 | </script>だけはエスケープする必要がある。 タグ中のコードが非表示になる事がある。 |
ここまでで、設定に関する情報は終わりです。次はデザインについてです。
2012/10/07
Syntax Highlighter 【導入】
バージョンは3.0.83を元に書いています。
コードを綺麗に貼り付けられるSyntax Highlighterですが、公式サイトを見ると2004年から発表されていたみたいで、結構長い歴史があるんですね。
中身はjavascriptで書かれたライブラリでそれを利用することで、キーワドに色を付けたり、整形しているタイプのコードハイライターです。
大雑把な使い方を説明すると、ライブラリを読み込み、指定された書式で書くだけです。
通常は、ライブラリを公式サイトからダウンロードしてきて(ダウンロードページ)、自分の利用するサーバにアップロード、それを呼び出すという手順だと思いますが、Bloggerではサーバにこの様なファイルをアップロードする事は出来ない様子。
どうするのかとSyntax Highlighterのサイトを見ると、ホスティングされたライブラリをリンクして読み込む形で、無料で利用出来るとの事です。
5行目でXML用のbrushファイルだけ先に読み込んでいる理由は、Autoloaderを用いても、HTMLと他言語の混在表示使用時(パラメータで設定)には前もって読み込んでおく必要があるからで、混在表示を利用しなければ不要です。
このコードを<head>タグ内に記述します。このブログ(Blogger)では直接”HTMLの編集”で書き加えました。
表示したいコード部分の読み込みが完了した後に、 Autoloaderでbrushファイルを読み込み、 36行目のSyntaxHighlighter.all();を実行することで、Syntax Highlighterが動作します。
表示したい部分が読み込まれていなければなりませんので、<head>タグ内に書いては駄目です。ページの下の方に配置するか、ページ表示完了のイベント時に実行するのが良いのでは無いでしょうか。BloggerならガジェットのHTML/JavaScriptを使用すると便利です。
ただし、どんなコードでもそのまま貼り付けられる訳では無く、使える文字の種類に制限があります。以下の表左の文字は右の文字列へエスケープして下さい。
この他にBloggerの投稿記事では、コード中のタブがスペース1文字に変換されてしまいます。これを回避するには、タブを	とする必要があります。
preタグのclass属性の中でbrush: に続いて言語を指定します。必須項目で以下の表の中から選びます。
言語の指定に続いてパラメータが指定できます。
上記のコードをhtmlに貼り付けると、以下の様な表示になります(デフォルトテーマ)。
この状態で使えない事も無いですが、不要な縦スクロールバー等、デザイン的に無駄な部分がある他、ブラウザのChromeにおいて、行表示に不具合がある事から、少しデザインをカスタマイズしたほうが良いかと思います。細かい設定等は次の記事で。
コードを綺麗に貼り付けられるSyntax Highlighterですが、公式サイトを見ると2004年から発表されていたみたいで、結構長い歴史があるんですね。
中身はjavascriptで書かれたライブラリでそれを利用することで、キーワドに色を付けたり、整形しているタイプのコードハイライターです。
大雑把な使い方を説明すると、ライブラリを読み込み、指定された書式で書くだけです。
通常は、ライブラリを公式サイトからダウンロードしてきて(ダウンロードページ)、自分の利用するサーバにアップロード、それを呼び出すという手順だと思いますが、Bloggerではサーバにこの様なファイルをアップロードする事は出来ない様子。
どうするのかとSyntax Highlighterのサイトを見ると、ホスティングされたライブラリをリンクして読み込む形で、無料で利用出来るとの事です。
セットアップ
現在のバージョンは3.0.83なのでそれを元に書いてあります。バージョン2.xとはデザインや操作も少し変更されており、旧バージョンが必要という場合は(ファイルが残されているので)そちらを使うことも可能です。ライブラリの読み込み
基本的には本体のshCore.jsとshCore.css、テーマのcssファイルを読み込み、言語に対応したbrushファイルを読み込むだけです。用意されたbrushファイル全ての読み込みを羅列しても動作しますが、無駄な部分が多くなり表示速度的にも良くなさそうなので、Autoloaderを使い、使用するbrushファイルだけを動的に読み込みます。<link href= 'http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href= 'http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type="text/javascript"></script>※ここでは、デフォルトテーマを読み込んでいます。
5行目でXML用のbrushファイルだけ先に読み込んでいる理由は、Autoloaderを用いても、HTMLと他言語の混在表示使用時(パラメータで設定)には前もって読み込んでおく必要があるからで、混在表示を利用しなければ不要です。
このコードを<head>タグ内に記述します。このブログ(Blogger)では直接”HTMLの編集”で書き加えました。
実行
<script language="javascript" type="text/javascript">
function path() {
var args = arguments, result = [];
for (var i = 0; i < args.length; i++)
result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescrip @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
</script>
公式サイトに書いてあるコードそのままです。
9行～34行がAutoloaderで、必要なbrushファイルを読み出しています。
2行～7行がファイルのパスを書き換える処理で、必要に応じて5行目のアドレス部分を変えるだけで、柔軟にファイルの場所を変更出来ます。
表示したいコード部分の読み込みが完了した後に、 Autoloaderでbrushファイルを読み込み、 36行目のSyntaxHighlighter.all();を実行することで、Syntax Highlighterが動作します。
表示したい部分が読み込まれていなければなりませんので、<head>タグ内に書いては駄目です。ページの下の方に配置するか、ページ表示完了のイベント時に実行するのが良いのでは無いでしょうか。BloggerならガジェットのHTML/JavaScriptを使用すると便利です。
コードの貼り付け
preタグ内に表示したいコードを貼り付けます。その他、scriptタグを使用しても貼り付ける事が出来るようです。<pre class="brush: c-sharp; toolbar: false" title="sample">
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
</pre>
ハイライトされている部分が、貼り付けたいコードの内容になります。ただし、どんなコードでもそのまま貼り付けられる訳では無く、使える文字の種類に制限があります。以下の表左の文字は右の文字列へエスケープして下さい。
| 制限される文字 | 代替文字 |
| < | < |
| > | > |
| & | & |
| " | " |
| ' | ' |
preタグのclass属性の中でbrush: に続いて言語を指定します。必須項目で以下の表の中から選びます。
| コードの言語 | brushに記述するエイリアス (複数あるものはどれでも可) |
使用するために必要なファイル |
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
言語の指定に続いてパラメータが指定できます。
上記のコードをhtmlに貼り付けると、以下の様な表示になります(デフォルトテーマ)。
この状態で使えない事も無いですが、不要な縦スクロールバー等、デザイン的に無駄な部分がある他、ブラウザのChromeにおいて、行表示に不具合がある事から、少しデザインをカスタマイズしたほうが良いかと思います。細かい設定等は次の記事で。
2012/10/05
コードハイライター
コードハイライター？それともシンタックスハイライターでしょうか。
一般名は良く知りませんが、プログラムのコード等を、綺麗に表示するためのツールがあります。このブログでもそういったコードを貼り付けることがあるだろうと、探してみました。
色々種類はあったのですが、個人的にデザインが気に入ったSyntax Highlighterを使ってみようかと思います。
デザインもある程度変更可能なので、少しカスタマイズして実際にコードを貼り付けてみました。
次の記事からは、このSyntax Highlighterに関してまとめた事をアップしようと思います。
一般名は良く知りませんが、プログラムのコード等を、綺麗に表示するためのツールがあります。このブログでもそういったコードを貼り付けることがあるだろうと、探してみました。
色々種類はあったのですが、個人的にデザインが気に入ったSyntax Highlighterを使ってみようかと思います。
デザインもある程度変更可能なので、少しカスタマイズして実際にコードを貼り付けてみました。
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
これはいいですね。既に定番なツールの様で、多くのサイトで紹介や解説が説明がなされています。比較的楽に情報を集めて設置する事が出来ました。次の記事からは、このSyntax Highlighterに関してまとめた事をアップしようと思います。
2012/10/04
WLI-UC-GNM2Tでソフトウェアルーターのエラー
BAFFALOのWLI-UC-GNM2TというUSBタイプの無線LAN子機を購入したのですが、少し躓いたことがありメモ代わりに書いておきます。
この無線LAN子機、設定で親機になることが出来るのでそれを目当てに購入しました。
親機、子機の切り替えはハードウェアで行うものではなく、ソフトウェアで行うもので、セットアップ後肝心のソフトウェアルーターを開始して、親機モードにしようとするとエラーが発生します。
結論から言うと自分の設定が悪かったのですが、その時は何が原因か分からず、取り敢えずネットで調べてみることにしました。
結構同じような人がいて、原因も様々のようですが、どれも自分のケースとは違う様子。※私の場合windows7 64bitです。
ネットワークと共有センターから、アダプター設定を開きローカルエリア接続のプロパティ中の、ネットワークの―にチェックを入れたり、外したりしてみるという解決法がありましたが、それでも解決せず(エラーメッセージはここをOFFにしろと言っている訳です)。
その後、色々調べてようやく原因が分かりました。
それは必要なサービスを停止していたことでした。
OSのカスタマイズで不要なサービスを停止するというのがありますが、それをしていたんです。OSのインストールしたての頃にやっていたことなので、すっかり忘れていたんですね。
で、インターネット接続の共有に必要なサービスが停止していたので、エラーが発生していた訳です。
| 必要なサービス | 標準の設定 |
| Application Layer Gateway Service | 停止/手動 |
| Network Connections | 開始/手動 |
| Network Location Awareness | 開始/自動 |
| Plug and Play | 開始/自動 |
| Remote Access Auto Connection Manager | 停止/手動 |
| Remote Access Connection Manager | 停止/手動 |
| Remote Procedure Call (RPC) | 開始/自動 |
| Telephony | 停止/手動 |
この辺りがインターネットの接続の共有に必要なサービスと標準設定のようです。
(ネットで集めた情報なので、間違いがあるかもしれません)
(ネットで集めた情報なので、間違いがあるかもしれません)
私の場合不要なサービスとしてTelephonyなどを無効にしていました。これを参考にサービスを設定して無事親機モードに出来ましたが、OSのエディション違い等で異なる点があるかもしれません。参考までに。