メモを揉めスマートフォン用の表示で見るメモを揉めお勉強の覚書。この広告は、90日以上更新していないブログに表示しています。Tableはてなブログのコードの表示に個人的になんとなく違和感があって、特にモバイル環境で見た時の折り返しが見難い。いうものは見た目をカスタマイズしたい願望があって、はてなブログはモバイルのデザインをカスタマイズできない*1のがどうにもつらい気持ちがあった。*2ブログを始めた当初は自分でシンタックスハイライトを作ったりもしたんだけど、最近見たらおもくそバグってたのと、自動化できてないので投稿前に手動でマークアップ済みのHTMLを貼り付けて投稿するのが死ぬほど面倒臭かった。CoffeeScriptだRubyだSwiftだと徐々に他の言語にも手を出し始めると、いちいちやってられっかぁぁーーーって感じになった。見た目だけはいっちょ前に気になってしまうので、既存のもので何か良い物はないか探していたのであった。こんなものがあったような気がするリストSyntaxHighlighter結構いろんなブログで見かけたような気がする。これにしようかとも思ったんだけど、どこかの記事でソースコード中の<とか&とかをエスケープできていなかったせいで、表示が崩れちゃっているのを見て、なんとなくエスケープは自分で手動なり自動なりでする必要があるなら、あんまり変わらないんじゃないか?と思ってしまったのでやめた。あと好みのカラースキームが見つからなそうな感じがした(そこまでちゃんと探してない)。Gistこれもかなり有力な候補だったんだけど、一度書いてアップしたあとで貼り付けなければならず、ソースコードの細かい修正とかが面倒そうだなっと思ってしまいやめた。ある程度まとまったコードならいいけど、一行とかの大量のGistを管理するのは大変そうだし。対応言語の多さと新しい言語への対応の早さは信頼出来るので、これからも要所要所で使うと思う。エスケープを気にする必要が無いのも良い。はてなブログのシンタックスハイライトえーと、そうですね、なんか書いてるうちになんかこれでいいんじゃないかって気がしてきてしまったんですけど、エスケープも勝手にやってくれるし、これじゃダメな理由としては、、、う~ん無いですね、なんかあったような気がしたんですけどね。どちらかと言うとCodeMirrorでやってみたいっていう技術的好奇心の方が大きくて、はてなブログの機能としての欠点は特に無いです。JSFiddleとCODEPEN実際に使ってみたことはあるのですが、調子に乗って貼りまくってたらものすごく重くなりました。これもGistと同じで管理が大変そうなのと一行とかのソースコードをたくさん貼るのに向かないかなあって。シンタックスハイライトのためだけに使うには高カロリー。CodeMirrorにした理由とてもパーソナルな理由です。LightTableを使っているはい、これ。LightTableについてLightTableはUIの描画にHTMLが使われていて、ベースにCodeMirrorが使われています。CodeMirrorブラウザで動作するJavaScript製のエディタ。エディタとしての機能はめちゃくちゃ強力なのですが、今回はそれを全く使わず、シンタックスハイライトの機能のみを使おうという魂胆です。このCodeMirrorにはたくさんの言語モードが用意されていて、全てプラグイン形式になっています。LightTableではカラースキームとしてこのCodeMirrorのカラースキームがおそらくそのまま使われているっぽくて、どうやら互換性があります。いうことは、LightTableで使っているカラースキームをCodeMirrorに持ってこれるのでは?と思ってやってみたら見事成功。ブログのソースコードを自分のエディタ環境と同じ見た目、同じルールにできるので、だいぶ素敵だと思います。DarkSystemCDというカラースキームがドンピシャたまたまLightTableのプラグインマネージャを開いたら新しいテーマがアップロードされていて、それがこのDarkSystemCDというカラースキーム。wds-connections/darksystemcd-lighttable-themeかっこいい。これをブログでも使いたいというのが理由。Newも好きなんだけどね。MarkDownとの併用ブログはMarkDownで書いているので、できればその中で完結させたいです。SyntaxHighlighterのように<pre>にクラスを割り当てて、それにシンタックスハイライトを適用するという仕組みだと、MarkDownでコードブロックを利用した際、クラスを割り当てられません。回避策としてそこだけHTMLを直に書くという方法も考えましたが、そうすると今度はMarkDownのコードブロックの自動的なエスケープの恩恵を受けられないので、結局別途エスケープする必要が出て振り出しに戻ります。一つは、<pre>の前にコメントでアノテーションを入れる方法を思いつきましたが、はてなブログだとコメントが除去されちゃうのでNG。一つは<p>要素*3にクラスを割り当てて、その要素をアノテーションにする方法。結局今はこの方法で運用している。ちなみにこの方法はCodeMirror以外にも応用出来るので、MarkDownと組み合わせたい場合にはいいかもしれないです。RoomMirrorというモジュールにしましたこれらの機能をRoomMirrorというnpmのモジュールにしました。npmモジュールです、緊張してます。}"></p>というアノテーションをコードブロックの直前に書くことでCodeMirrorがシンタックスハイライトを行うような仕組みになっています。data-evalでCodeMirrorにオプションを渡せる。readOnlyにfalseを指定しているので以下のデモは全て編集可能です。10solarized今気づいたけどこれ背景にテクスチャが使われている...。LightTable)LightTableのデフォルトのテーマです。10CodeMirrorとLightTableでは、同名のスキームでもかなり違いがありました。ここでは、同名の物は全てLightTable版のものを使っています。ライブラリを公開しました。)はてなブログをはじめよう!alluserさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。