Octopressにテーブル(テーブル)をマークダウン(Markdown)で編集できるようにする方法があったので書いておきます。

🗻 data-テーブル。cssの追加

source/stylesheets/にdata-テーブル。cssを追加。

* + テーブル {
    border-style:solid;
    border-width:1px;
    border-color:#e7e3e7;
    margin: 10px 0 30px 0;
}

* + テーブルth, * + テーブルtd {
    border-style:dashed;
    border-width:1px;
    border-color:#e7e3e7;
}

* + テーブルth {
    border-style:solid;
    font-weight:bold;
    background: url("/images/noise.png?1330434582") repeat scroll left top #F7F3F7;
    padding: 2px 9px;
}

* + テーブルtd {
    padding: 2px 9px;
}

* + テーブルth[align="left"], * + テーブルtd[align="left"] {
    text-align:left;
}

* + テーブルth[align="right"], * + テーブルtd[align="right"] {
    text-align:right;
}

* + テーブルth[align="center"], * + テーブルtd[align="center"] {
    text-align:center;
}

tr:nth-child(even){
    background: url("/images/noise.png?1330434582") repeat scroll left top #F7F3F7;
}

🐮 htmlのheaderにcssのリンクを追加

source/_includes/head.htmlに以下のコードを追加。

<link href="<%= config.url %>/stylesheets/data-table.css" rel="stylesheet" type="text/css" />

😼 記事のマークダウンファイルにテーブルタグを書く

次のようなテーブルタグをマークダウンに追加します。

| Column1(left) | Column2(center) | Column2(right) |
| :------------ | :-------------: | -------------: |
| foo           | foo             | foo

すると次のように自動でテーブルに変換してくれます。

Column1(left)	Column2(center)	Column2(right)
foo	foo	foo

参考リンク

🏈 変更来歴

05/07 17:30 cssの記述名のミスを修正

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと

OctopressでテーブルをMarkdownで編集できるようにする