Hatena::ブログ(Diary)

by edvakf in hatena

2010-03-28

Bloggerではてな記法を使うユーザースクリプト

Blogger に個人的なブログを作ったので、慣れ親しんだはてな記法が使えるようにしてみた。

Opera, Chrome, Firefox (Greasemonkey) で使えるはず。

(Chrome は自動インストールにならないみたいなので、blogger-hatena-syntax.user.js という名前で保存して Drag & Drop したらいいかな)


text-hatena.js を使わせてもらった。

特徴は、スーパー pre 記法のシンタックスハイライトに対応していること。オリジナルの text-hatena.js はスーパー pre 記法は使えるものの、シンタックスハイライトはできなかったのでちょっと弄った。

ハイライトには SHJS - Syntax Highlighting in JavaScript を使っている。これのライセンスGPL なのでスクリプトも GPL になった。


こんな感じでプレビューを見ながら書ける。

f:id:edvakf:20100328084455p:image:w600

左下のテキスト欄にはてな記法を書くと、上の (元々の) 欄には HTML が入る。はてな記法のソースは HTML コメントとして保存される。

編集画面ではハイライトできてないけど、HTML ソースを見ればちゃんとクラスが付いているので、SHJS のサイトから適当な CSS を拾ってきて、ヘッダー部分に埋め込めばいい。↓完成図。

f:id:edvakf:20100328090204p:image


ハイライト対応言語は以下の通り。メジャーっぽいのは網羅したつもり。括弧内は >|ここの部分| に書くテキスト。

C (c), C++ (cpp), CSS (css), diff (diff), HTML (html), Java (java), 
JavaScript (javascript), Perl (perl), PHP (php), Python (python),
Ruby (ruby), Scala (scala), Shell Script (sh), SQL (sql), XML (xml)

SHJS のサイトには他にもいくつか対応言語の定義ファイルが置いてあるので、自分でコピーしてスクリプトの最下部にコピペしたら使える。


改行を自動で付けるようにしてあるとうまく使えないと思うので、設定の Formatting というところから Convert line breaks というやつを No にしておくこと。

f:id:edvakf:20100328084926p:image

f:id:edvakf:20100328085135p:image


実は前にも一度 Blogger を使い始めたんだけど、結局使いにくくて長続きしなかったので諦めた。スクリプトを自由に書けるのはいいけど、ファイルのアップロードができないのでライブラリを使う場合に困ったり。三日坊主で終わると恥ずかしいので URL は貼らない。


あ、text-hatena.js が古くてリンク記法が使えない… 直そう。

自動リンクに対応した。

  • http://〜 自動リンク対応せず。
  • [http://〜] 自動リンクする。
  • [http://〜:title] 自動リンク + タイトルを YQL から取得。
  • [http://〜:title=〜] 自動リンクする。

引用記法がエラー出してるな。あとで直す。

引用記法に対応した。

ハイフンを2つ以上続けて書いたときのバグを直した。(元ソースを HTML コメント中に保存するため、ハイフンを2つ以上連続で書けない。これはエスケープしてカバーしたつもりだったんだけど、text-hatena.js にバグがあったためアンエスケープがうまくいってなかった)

Akihiro HARAIAkihiro HARAI 2013/06/21 19:52 使おうと思ったらBloggerのデザインが変わって動かないので、
Blogger Hatena MarkupとしてGitHubでメンテナンスすることにしました。

https://github.com/harai/blogger-hatena-markup

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

Connection: close