Skip to content

Instantly share code, notes, and snippets.

@higuma
Last active March 2, 2023 09:59
Show Gist options
  • Save higuma/80cff0982f9f7e2a267b33cad20f984a to your computer and use it in GitHub Desktop.
Save higuma/80cff0982f9f7e2a267b33cad20f984a to your computer and use it in GitHub Desktop.
GitHub MarkdownのCSS色表示機能

コメント中の色表現

本機能はGitHub repo本文(READMEなど)では機能しないことに注意。効果はこの本文の下にあるコメント欄を見ると確認できる。

GitHubのComments/Issues/Pull requestsではコードスパンの中にCSSの色表現を記述するとカラーサンプル付きで表示する。

ただし全ての表現が使えるのではなく、使える書式とそうでないものがある。確認コードは次の通り。

| 表現 | 文例 | 判定 |
| - | - | - |
| RGB(16進3桁) | `#48A` | 無効 |
| RGB(16進6桁大文字) | `#44CCAA` | 有効 |
| RGB(16進6桁小文字) | `#eeaacc` | 有効 |
| rgb関数(0-255) | `rgb(0, 240, 170)` | 有効 |
| rgb関数(%) | `rgb(70%, 40%, 20%)` | 無効 |
| rgba関数(0-255) | `rgba(120, 240, 170, 0.7)` | 有効 |
| rgba関数(%) | `rgba(70%, 40%, 20%, 70%)` | 無効 |
| hsl | `hsl(120, 70%, 50%)` | 有効 |
| hsla | `hsl(120, 70%, 50%, 0.7)` | 有効 |
| hsla(%) | `hsl(120, 70%, 50%, 70%)` | 無効 |
| lch | `lch(29.2345% 44.2 27)` | 無効 |

これらは本文中では機能しない。

表現 文例 判定
RGB(16進3桁) #48A 無効
RGB(16進6桁大文字) #44CCAA 有効
RGB(16進6桁小文字) #eeaacc 有効
rgb関数(0-255) rgb(0, 240, 170) 有効
rgb関数(%) rgb(70%, 40%, 20%) 無効
rgba関数(0-255) rgba(120, 240, 170, 0.7) 有効
rgba関数(%) rgba(70%, 40%, 20%, 70%) 無効
hsl hsl(120, 70%, 50%) 有効
hsla hsl(120, 70%, 50%, 0.7) 有効
hsla hsl(120, 70%, 50%, 70%) 無効
lch lch(29.2345% 44.2 27) 無効

実際の効果は下記コメント欄を参照(コメント欄に書かないと機能しない)。

@higuma
Copy link
Author

higuma commented Sep 22, 2022

表現 文例 判定
RGB(16進3桁) #48A 無効
RGB(16進6桁大文字) #44CCAA 有効
RGB(16進6桁小文字) #eeaacc 有効
rgb関数(0-255) rgb(0, 240, 170) 有効
rgb関数(%) rgb(70%, 40%, 20%) 無効
rgba関数(0-255) rgba(120, 240, 170, 0.7) 有効
rgba関数(%) rgba(70%, 40%, 20%, 70%) 無効
hsl hsl(120, 70%, 50%) 有効
hsla hsl(120, 70%, 50%, 0.7) 有効
hsla(%) hsl(120, 70%, 50%, 70%) 無効
lch lch(29.2345% 44.2 27) 無効

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment