nolib.jpちょっと修正。超軽量テキストハイライトライブラリ「google code pretify」

自作のJavaScriptライブラリ「nolib.jp」の話です。


inputやtextareaにソースを書いていると、どうしてもスマートフォンで見たときに使いにくくなってしまいます。

特にnolib.jpの構成はviewportを820に設定してありますので普段全体が縮小されており、入力にフォーカスがあたると等倍まで拡大され、下手をすると画面いっぱいに入力エリアが表示されてしまってもうどうしようもなくなってしまいます。


そこで、ソースコード部をテキストハイライト系のライブラリを入れて問題解消をしようと思って見つけたのが google code pretify。

このライブラリの何がすごいって、中途半端なんです。。

行番号表示も５行ずつの固定だったり、背景に関する機能は全くなし。


しかし、何よりよかったのが「軽い」ってところです。


nolib.jpはアニメーション系のライブラリ紹介サイトでサンプルを１ページ内にいくつか貼ってあったりして、手書きのアニメーション処理にして極力軽くしてはあるんですが、やはりどうしても低スペックなAndroid 3.x系の端末だと、細かいイベントハンドラ処理をやっているようなものを導入しにくいんです。


で、目を付けたのが気持ちいいくらい何もやっていないcode pretify。


非常にお世話になったので勝手にリンクをはらさせていただきます。「しゃけろぐ」さんのこちらの記事を参考にしました。


技術的な面もですが、あ、出来るんだという精神的な、背中を押してくれたような意味でも感謝です。

ちなみに今回僕が追加したのは以下のCSSです。

pre.prettyprint{
 margin: 5px 0 10px 0;
 color: #666666;
 background-color: #F0F0F0;
 -webkit-border-radius : 6px;
 -moz-border-radius : 6px;
 -o-border-radius : 6px;
 -ms-border-radius : 6px;
 border-radius : 6px;
 border: solid 1px #777777;
 box-shadow: 0px 0px 1px 2px #CCCCCC;
 
 min-width: 750px;
}
ol.linenums li {
    list-style: decimal outside;
    line-height: 1.5;
    border-left: solid 3px #6CE26C;
    padding-left: 3px;
    margin-left: 3em;
    background-color: #FFFFFF;
    font-size: 13px;
}
ol.linenums li.L1,
ol.linenums li.L3,
ol.linenums li.L5,
ol.linenums li.L7,
ol.linenums li.L9 {background-color: rgb(248, 248, 248)}

今後、色々なデバイスに見せる、という事を考える上で、機能がたくさんある凄いライブラリもですが、こういった「とにかく軽い」ライブラリにも注目が集まるかもしれないなと感じました。