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の記述名のミスを修正

📚 おすすめの書籍