WEBアプリケーション研究室 開発ノート TOP

WEBアプリケーション研究室 開発ノート ソースを見やすくする。

スポンサーサイト

-------- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

    このエントリーをはてなブックマークに追加

今までこのブログにソースを書き込むときpreタグを使って書いていました。


//ここにソース
$test = new Test();
echo $test->execute();
Dctrineやsymfonyのドキュメントを読んでいるとソースが非常に見やすく書いてあります。ページのHtmlソースを見たりfirebugで見てみたのですが結局どんなツールを使ってるのか良くわかりませんでした。

代わりにSyntaxHighlighterというツールを見つけました。いくつか微妙な点もあるのですが色々な言語に対応していてcssで見た目のカスタマイズもできるので試しにしばらく使ってみようかと思います。

どんなふうに見えるかというと

//ここにソース
$test = new Test();
echo $test->execute();
こんな感じです。デフォルトではコピーなどのボタンがあるツールバーが右上に出てソースが見づらかったので移動しました。

.syntaxhighlighter .toolbar
{
position: static !important;
padding: 3px 8px 20px 0 !important;
}

.syntaxhighlighter
{
width: 95% !important;
}
でデフォルトでは行番号が出るのですが、これがあるとコピーする時に不便なので消してみました。あとbloggerModeをtrueにしないとbrタグが表示されてしまいます。

SyntaxHighlighter.config.bloggerMode= true;
SyntaxHighlighter.config.clipboardSwf = 'http://blog-imgs-26.fc2.com/g/o/m/gomojp/clipboard.swf';
SyntaxHighlighter.defaults['html-script'] = true;
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.all();
ところがcssでdisplayをnoneにしているらしく、画面上は見えないのですがコピーするとコピーされちゃいます。で微妙ですが少しだけいじって行番号を出ないようにしまいした。
1349行目

+ (this.getParam('gutter') ? '' + lineNumber + '.' : '')
行番号を出さない設定ならタグごと出さないように。

IEでコピーすると微妙に改行とインデントがおかしいです。
自分で作るのも大変そうだし、なんか良いツール無いですかね?
お勧めありましたらコメントお願いいたします。
スポンサーサイト

    このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。