Markdownの表でセルのバックグラウンドにカラーを

9698 ワード
HTML bgcolor Markdown 表 HTML テキストリンク

はじめに

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>も記述しないとエラーになる。