はじめに
Markdownの表でセルのバックグランドにカラーをつけるやりかたです。
VSCodeのプレビューやPDF出力に反映できます。
忘れないうちに記事にしておきます。
※2020/11/06 MarkDown Preview (v0.5.13)の動作が少し変更されたようで全体に見直しました。
前提
- Windows 7 以上のOS
- VSCode(Visual Studio Code)インストール済み
- VSCode拡張機能 Markdown Preview Enhancedインストール済み (2020/11/16 v0.5.13)
- VSCode拡張機能 Markdown PDFインストール済み
元ネタの表
Markdownの記述
| № | 色 | 値 |
|---|---|---|
| 1 | white | #ffffff |
| 2 | black | #000000 |
| 3 | red | #ff0000 |
| 4 | blue | #0000ff |
| 5 | yellow | #ffff00 |
| 6 | gree | #008000 |
| 7 | orange | #ffa500 |
| 8 | pink | #ffc0cb |
[Markdown]
|№|色|値|
|:--:|:--:|:--:|
|1|white|#ffffff|
|2|black|#000000|
|3|red|#ff0000|
|4|blue|#0000ff|
|5|yellow|#ffff00|
|6|gree|#008000|
|7|orange|#ffa500|
|8|pink|#ffc0cb|
htmlの記述
Markdownの記述をhtmlで表現すると下記のようにります。
| № | 色 | 値 |
| 1 | white | #ffffff |
| 2 | white | #000000 |
| 3 | red | #ff0000 |
| 4 | blue | #0000ff |
| 5 | yellow | #ffff00 |
| 6 | green | #008000 |
| 7 | orange | #ffa500 |
| 8 | pink | #ffc0cb |
[html]
<table>～</table>で表を定義します。
行は<tr>でセルは<td>で定義します。
<td>にbgcolorを定義すれば、colorを指定できます。
<table>
<tr><td>№<td>色<td>値
<tr><td>1<td>white<td>#ffffff
<tr><td>2<td>white<td>#000000
<tr><td>3<td>red<td>#0000ff
<tr><td>4<td>blue<td>#ffff00
<tr><td>5<td>yellow<td>#ffff00
<tr><td>6<td>green<td>#ffff00
<tr><td>7<td>orange<td>#ffff00
<tr><td>8<td>pink<td>#ffff00
</table>
[修正後のhtml]
<table>
<tr><td>№<td>色<td>値
<tr><td>1<td bgcolor=white>white<td>#ffffff
<tr><td>2<td bgcolor=black><font color=white>black<td>#000000
<tr><td>3<td bgcolor=red><font color=white>red<td>#ff0000
<tr><td>4<td bgcolor=blue><font color=white>blue<td>#0000ff
<tr><td>5<td bgcolor=yellow>yellow<td>#ffff00
<tr><td>6<td bgcolor=green><font color=white>green<td>#008000
<tr><td>7<td bgcolor=orange>orange<td>#ffa500
<tr><td>8<td bgcolor=pink>pink<td>#ffc0cb
</table>
これをそのまま、VSCodeのMarkdownの中に貼り付けると表のセルに色を付けることができます。
QittaのMarkdownプレビューではbgcolorが対応していないようなので、Markdown Preview Enhancedのプレビュー結果を貼り付けます。
これはhtmlの普通のやりかたです。
Markdownミックスhtml
Markdownとhtmlのミックスを試してみました。
|№|色|値|
|:-:|:-:|:-:|
|1<td bgcolor=white>white|#ffffff|
|2<td bgcolor=black><font color=white>black|#000000|
|3<td bgcolor=red><font color=white>red|#0000ff|
|4<td bgcolor=blue><font color=white>blue|#ffff00|
|5<td bgcolor=yellow>yellow|#ffff00|
|6<td bgcolor=green><font color=white>green|#ffff00|
|7<td bgcolor=orange>orange|#ffff00|
|8<td bgcolor=pink>pink|#ffff00|
[Markdown Preview Enhanced プレビュー]
右に一列ブランクが挿入されます。<td>タグ分が付加されます。
見栄えをすてれば、これでもバックグラウンドにカラーが付いてます。
右のブランク列がなくなりました。
PDFの出力結果
VSCode拡張機能 Markdown PDFの出力結果です。
上がMarkdownとhtmlミックスの結果、下がhtmlのみ記述結果です。
ほぼいけてませんか？
まとめ
Markdownの表のセルに色をどうやって付けるのか、自己研究してみました。
もっと簡単でグッドな方法がありそうです。
とりあえず、<td>タグにbgcolorでもいいんじゃない程度の話ですいません。
[2020/11/06追記]
・MarkDownの場合、</td>、</tr>、</font>はなくてもいけてる。
・htmlの場合、VScodeの構文チェックで<td bgcolor="white">などの色指定はダブルクォーテーションでカラーを閉じる、また</td>、</tr>、</font>も記述しないとエラーになる。