MDUtil

Markdownで文字に色を付ける

Markdownだけでは文字色を変えられません。HTMLのスタイルが使えるエディタでの書き方と、スタイルが取り除かれるGitHubやDiscordで使われている代わりの方法を説明します。

要点

Markdownで文字色を変えるには？

Markdownに文字色の記法はありません。VS Code、Typora、ObsidianなどHTMLのスタイルが使えるエディタでは <span style="color: red">文字</span> と書きます。GitHubはスタイルを取り除くため、$\color{red}{\text{文字}}$ のようなLaTeXの数式で色を付けるか、diff のコードブロックで行ごとに色を付けます。

Markdown
$\color{#d1242f}{\text{赤い文字}}$ と $\color{#1a7f37}{\text{緑の文字}}$

表示結果

赤い文字\color{#d1242f}{\text{赤い文字}} と 緑の文字\color{#1a7f37}{\text{緑の文字}}

文字に色を付ける方法

どの方法も使えるアプリが限られます。説明に使える場所を書いています。

スタイル付きのHTML

スタイルが残る環境ではもっとも直接的な書き方です。GitHub、GitLab、多くのサイトは style 属性を取り除き、普通の文字で表示します。

Markdown
この単語は<span style="color: #d1242f">赤</span>です。

VS Code、Typora、Obsidianだけの書き方です。ほかのMarkdownアプリでは表示が異なるため、プレビューはありません。

数式のLaTeXで色を付ける

\color と \textcolor は数式の中で続く部分に色を付けます。文字は \text{} に入れると字形と間隔が保たれます。

Markdown
$\textcolor{#d1242f}{\text{失敗}}$ · $\textcolor{#1a7f37}{\text{成功}}$

表示結果

失敗\textcolor{#d1242f}{\text{失敗}} · 成功\textcolor{#1a7f37}{\text{成功}}

diff で赤と緑の行

diff のコードブロックでは、+ で始まる行が緑、- で始まる行が赤で表示されます。

Markdown
```diff
+ バージョン2で追加
- バージョン2で削除
```

表示結果

+ バージョン2で追加
- バージョン2で削除

色付きの絵文字を目印にする

絵文字はチャットツールやテキストでも色付きで表示されます。

Markdown
🔴 失敗 · 🟡 進行中 · 🟢 成功

表示結果

🔴 失敗 · 🟡 進行中 · 🟢 成功

GitHubのアラートで色付きの枠

GitHubは [!NOTE]、[!TIP]、[!WARNING] などで始まる引用を色付きの枠で表示します。

Markdown
> [!WARNING]
> この枠はGitHubでは黄色で表示されます。

GitHubだけの書き方です。ほかのMarkdownアプリでは表示が異なるため、プレビューはありません。

Discord：ANSIのカラーコード

ansi のコードブロックでは、Discordのデスクトップ版が [31m（赤）などのカラーコードのあとの文字に色を付けます。スマートフォン版では色が付きません。各コードは目に見えないエスケープ文字で始まり、コピーボタンはそれも含めてコピーします。

Markdown
```ansi
赤い文字 と 緑の文字
```

Discordだけの書き方です。ほかのMarkdownアプリでは表示が異なるため、プレビューはありません。

各サービスでの対応状況

色が付くかどうかは、アプリがHTMLと数式をどこまで使えるかで決まります。

サービス対応補足
GitHub違いありstyle と <font> は使えず、数式のLaTeXの色と diff ブロックは使えます。
VS Code / Typora対応プレビューで <span style="color: …"> が使えます。
Obsidian対応閲覧画面で <span style="color: …"> が使えます。
Notion違いあり入力記法はなく、書式メニューから文字色を変えます。
Discord違いありansi と diff のコードブロックの中でだけ色が付き、ansi の色はデスクトップ版でのみ表示されます。
Slack非対応メッセージで文字色は使えません。

よくある質問

Markdownで文字色を変えられますか？

Markdownだけではできません。HTMLのスタイルが使える環境では <span style="color: red">文字</span> と書き、GitHubのようにスタイルが取り除かれる環境ではLaTeXの色、diff ブロック、絵文字を使います。

GitHubで文字に色を付けるには？

GitHubは style 属性と <font> タグを取り除きます。数式の中で $\color{red}{\text{文字}}$ と書くと色付きの文字になり、diff のコードブロックでは行全体が緑や赤になります。

<font color="red"> はまだ使えますか？

廃止されたHTMLです。まだ表示するエディタもありますが、GitHubなど多くのサイトは取り除きます。

Discordで文字に色を付けるには？

ansi と書いたコードブロックでカラーコードを使うとデスクトップ版で色が付きます。diff のブロックで緑と赤の行を作ることもできます。普通のメッセージには色がありません。

色ではなくハイライトしたいときは？

<mark> タグを使います。詳しくはMarkdownのハイライトを参照してください。

PDFやWordに書き出しても色は残りますか？

数式の中のLaTeXの色はMarkdown PDF 変換で印刷されます。このサイトのツールは、GitHubと同じくHTMLの style 属性を取り除きます。