P_BLOG 使ってた頃から過去記事タイトルを一覧表示する機能は自分で自分の記事を読み返すときに重宝していて、この機能が欲しかったので作った。過去記事を全部一覧表示すると重いので一年分ずつ表示するようにした。便利。

portal shit!

portal shit!

博多市在住のサイト片手間ビリティエンジニアのウェブログです。

portalshit.net

ソースコードは以下。

morygonzalez/lokka-archives · GitHub

ちなみにテストはありません。悪しからず。

Lokka 、データベースはずっと SQLite で使ってたけど仕事で MongoDB を使っているため SQL 力の弱まりを感じてきたので MySQL に変えてみた。SQLite3 から MySQL への移行は意外と面倒くさくて、以下の Redmine の手順を参考にやってみた。

  1. Strip out PRAGMA lines
  2. Strip out BEGIN TRANSACTION; lines
  3. Strip out COMMIT; lines
  4. Strip out DELETE FROM and INSERT INTO the sqlite_sequence table
  5. Replace AUTOINCREMENT with AUTO_INCREMENT
  6. Replace DEFAULT ‘t’ and DEFAULT ‘f’ with DEFAULT ‘1’ and DEFAULT ‘0’
  7. Replace ,’t’ and ,’f’ with ,’1’ and ,’0’
  8. Replace “ with ` except in string values (otherwise it replaces all quotes in your text)

Migrating from sqlite3 to mysql - Redmine

↑の通りにやっておおむねうまくいったんだけど、なんか過去の記事を編集して更新すると、updated_at カラムだけじゃなく created_at まで更新されてしまうっぽい。SQLite で使ってるときにはそんなことなかったんだけどなぁ。これは問題な気がする。DataMapper のバグかな。土日で余裕があったら調べてみる。

ここにはっつけるコードのシンタックスハイライトには Google Code Prettify をこれまで使ってたんですけど、どうもいまいちでした。有名な SyntaxHighlighter も好きになれなかった。はてなブログのように綺麗なシンタックスハイライトさせたい! ということで作った。

morygonzalez/lokka-pygmentize

かなりシャレオツな感じにシンタックスハイライトできるようになったと思います。拾ってきた Monokai スタイルの CSS を当てています。

動作環境

裏側で使っているのは Python の Pygments。JavaScript オンリーで色付けするやつよりもこいつの方が圧倒的に綺麗でした。なのでこのプラグインを使うには Python と Pygments が必要です。Heroku では動くんでしょうか。動作未確認です。

使い方

HTML の pre タグのクラス名を lexer として Pygments に渡します。Ruby のコードを書くのであれば以下のようにします。

<pre class="ruby">
  <code>
  class Book
    def off
      "all your book is 10 yen"
    end
  end
  </code>
</pre>

やってること

JavaScript で pre タグを探してサーバーにコードの中身と pre タグのクラス名を投げると、Pygmentize された HTML が返ってくるようになっております。そいつを JavaScript で拾って pre タグの中身を入れ替え。

当初は

```ruby
class Book
  def off
    "all your book is 10 yen"
  end
end
```

みたいな感じで GitHub 風にしたいと思っていて、以下のような JavaScript を書いていたんですが JavaScript 力が低すぎて断念。

$('.body').each(function() {

  var Pygmentize = function(lexar, snippet) {
    var result;

    $.ajax({
      type: 'POST',
      url: '/pygmentize',
      async: false,
      data: {
        lexar: lexar,
        snippet: snippet
      },
    }).done(function(data) {
      result = data;
    });

    return result;
  }

  var entryBody = $(this).text();

  entryBody = entryBody.replace(/```(.+?) ([sS]*?)```/g,
    function(whole, lexar, snippet) {
      return Pygmentize(lexar, snippet);
    }
  );

  $(this).html(entryBody);
})

※Ajax なのに async: false とかしててイマイチ感ありますね。

とはいえ、汎用性の高い pre タグのクラス名を拾ってくる、という形での実装にしたので、 Markdown でなくても HTML でも Textile でもハイライトできるので結果オーライとします。

ちなみに Kramdown でクラス名を指定したいときは以下のようにするみたいです。

> hogehoge
{: .hoge }