はじめに
冬ですね。
最近の悩みはコーディング中に足が冷えることです。
さて、今回はGitHubのREADMEやプロフィールについてです。
この記事では、GitHub特有のMarkdownといくつかの埋め込みコンテンツを使って、ちょっとオシャレにプロフィールを作った時の覚え書きです。
GitHubのMarkdownフォーマット
GitHubのREADMEやプロフィールでは、Markdownをベースにしたフォーマットがされます。
これらはGitHub Flavored Markdownと呼ばれ、基本的なMarkdown構文に独自のフォーマットを追加して実装されています。
そのため、ほとんどのデザインはMarkdownの知識を流用して書くことができます。
ただし、これに限られない、デザインのためのいくつかの構文が用意されています。
以下はデザインで使えそうなフォーマットの抜粋です。
左右中央揃え
中央ぞろえにしたいコンテンツをdivタグで囲み、属性にalign='揃えたい方向'を指定することで要素の整列ができます。
<div align="left">ひだり</div>
<div align="right">みぎ</div>
<div align="center">まんなか</div>
絵文字
:EMOJI_NAME:とすることで絵文字の挿入ができます。
絵文字名の一覧は以下にまとめられています↓
注記
特記事項をハイライトするためのレイアウトが用意されています。
> [!NOTE]
> Highlights information that users should take into account, even when skimming.
> [!TIP]
> Optional information to help a user be more successful.
> [!IMPORTANT]
> Crucial information necessary for users to succeed.
> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
> [!CAUTION]
> Negative potential consequences of an action.
埋め込みコンテンツ
これは公式ではありませんが、GitHubのプロフィールやREADMEを装飾する目的で、有志の開発者が埋め込みコンテンツを作成しています。
GitHub上でgithub-profileと検索することで、様々な埋め込みコンテンツが確認できます。↓
これらの埋め込みコンテンツは、各ツールによって使い方に差異はありますが、基本的にURL形式で簡単に使用することができます。
また、データを動的に作成しているので、自分の開発の遍歴や統計データを簡単に可視化できるのもいいところ。
以下にいくつかのおすすめツールをまとめてみました。
shields.io
様々な用途に応じたバッジを作成できるツールです。
プロフィールで各種SNSのリンクを置いたり、READMEでリポジトリの状況を表示するのに使ったりとけっこう便利。
GitHub Readme Stats
GitHub上でのコミットやPR数、使っている言語などの割合を表示してくれるツールです。
シンプルで人気も高く、いろんな人のプロフィールで見るイメージ。
skill-icons
自分の持っている技術スタックをプロフィールに飾りたいこと、ありますよね？
そんな時に使うのがこれです。
シンプルなアイコンで、自分が使える技術をプロフィールに飾ることができていい感じ。
Typograssy
GitHubのcommit数を表示するグラフ（通称芝）を模した電光掲示板を表示してくれるツール。
横スクロールで文字が出てくるのがおしゃんでお気に入りなのと、一部日本語にも対応しているのがおすすめポイント。
その他
小手先ですが、いくつか小ネタもあります。
フォント
原則として、GitHub Flavored Markdownではフォントの指定はできません。
が、Unicode内にある装飾文字を使うことで、それっぽい英字を出すことはできたりします。（メンテナンス性は落ちますが）
やり方は簡単。
Unicodeから該当の文字を引っ張ってくるだけです。
以下の変換サイトがおすすめです。
作ってみた
以上の知識を使って、プロフィールをいい感じにしてみました。↓
個人的なお気に入りはフォントです。手書き感があってかわいい。