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


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のヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍