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

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


data-テーブル。cssの追加

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
* + テーブル {
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に以下のコードを追加。

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