Syntax HighlighterdでBloggerでもキレイなコード表示

このブログにコードを記録するために、いちいち特殊文字変換をしていたのですが、そんなめんどくさいことをしなくてもいいものがあるのを知りました。





Syntax Highlighterはwordpress のプラグインとかにもなっていて、結構有名らしい。　本家に行くとダウンロードしたものがもらえるのですが、やはり直リンクでもらってきてBlogger にも使っている人がいました。

で、私も…後々扱いやすいようにレイアウトの一番上にパーツとして入れてみました。

この方の説明だけだと、jsのリンクを延々とheadに入れるみたいですけど、私などは最低限のphpとhtmlとjavascript くらいでいいので選んで、本家の説明を読みつつ、最低限のリンクをはってみて、すべてパーツの中に入れました。　色目は緑（Diango）にしてみた。　なるほどcss をjava script でbody要素に書き込むことができるんだなと。

preで囲むのはエスケープが必要とあり、…それって何なんって思ったら結局＜とかを特殊文字変換しないといけないと。でも　script　メソッドのCDATAを使うとそれは不要なんだと。　よかった。

＊＊＊のところはjsかphpか…



エスケープって言うのか～って感じ。

いろいろconfigがあり、カスタマイズできるようです。

Blogger に使うにあったって　bloggerMode ture にしておくのが最大のポイントのようです。

本家のあっさりしすぎる説明ではまったくわからないけど、日本語で超丁寧に解説している方がいていろいろわかった。

私の場合は、横の数字とかいらないので、

SyntaxHighlighter.defaults['gutter'] = false;

でよく、それだとパツパツになっているので、div で背景色#0a2b1d　をつけて囲むことを考える。←　追加のCSSカスタマイズで　.syntaxhighlighter にpadding 追加して不要でしたｗ

jsがリンクだからかもひとつ表示が遅いのが気になりますが何とかなります。また、コメントアウトしているのがちょっと勝手に改行されたりするけど、まぁ見る人が見たらわかる感じだからいいかと妥協。

これgoogle siteにも実装したら便利だろうなと…。






↑これはちょっとエラー出そうだったから特殊文字変換したけどｗ．

ところで…最近このブログの表示が遅いと思ったら#yamerunakan のツイッターフィードがおかしかったみたいで、もうこういうツイッターアプリがうまくいかなくなっていますので本家のものに変更した。　ちょっとイヤだけど。…本当にtwiiter api勉強したいなぁ。


最近、ちょこっと教えてあげて都会で自給自足というなかなかなブログを始めた人…
ハンサムな彼なんです。　若いってステキだなぁ。

更新が楽しみです。最初はが～っとやってはったみたいやけどｗ．

まぁ。何でも継続は力なんだと思うわ。私のこのカメのような能力の進歩も…

twitter でふぉろーされたのをきっかけに　coderbitsというものに参加してみた。

本来本当にできるコーダーの登録場所みたいだけど、びっくりするほどオンラインで賢くなれるようなサービスがあるのを知りました。知識の海のそこはしれないと思った。　これが役立つ日が来るといいんだけど。

大学の講義とかも無料のがある時代。よい時代になってきましたよ。

介護用の食器　すべらなくていいらしい。この前、介護フェアというのに行きみつけました。

---

お問合せフォーム

お名前 :

Email: (必須)

メッセージ: (必須)

｢今日も勉強しました｣の 「Syntax HighlighterdでBloggerでもキレイなコード表示」について…

約束します！迷惑かけません

　約束しないと、送信できません。再度の場合はリロードが必要です。

Tweet