Tech

【Astro】記事にGitHubみたいなアラートブロックつけるのちょろすぎて草

GFM（GitHub Flavored Markdown）みたいなヒントとか警告とかだすブロック、読みやすさを考えるならほしいですよね。Astroでこれを実装するのはあまりにチョロいです。

2025/12/23

Astroで、こんなの↓を実装したいとします。

情報

じょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほうじょうほう

ヒント

ちなみにこの↑の「ヒント」は書き換えられるわよ

なんでも指定できる

なんでも指定できてしまいます。

あまりに簡単

あまりに簡単すぎて、この記事を読み進めるときっと腰を抜かします。

共通文法

独自文法ではなくGitHubのやつと全く同じ書き方で通用します。

かつてGatsbyでも頑張って実装しようとしたものの、ろくなものがなく挫折しました。Gatsbyはgatsby-がついてるremarkプラグインじゃないとまともに動かないのでヤンスね。Astroだとあっさり実装できて笑いが止まりません。

やり方

まず、remark-github-alertsを入れます。

bun i remark-github-alerts

別にnpmやyarnでもできますが、未だにBunを使ったことがないという人は、今すぐ改宗してください。世界が変わります。

Bun — A fast all-in-one JavaScript runtime

Bundle, install, and run JavaScript & TypeScript — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner, and npm client built-in.

bun.com

その後、astro.config.mjsにプラグインをインポートしてぶち込み（追記し）ます。

import remarkGithubAlerts from 'remark-github-alerts';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkGithubAlerts]
  }
});

なお、Geminiに聞いたところ「remarkAlertを入れるのじゃ」と言われましたが、罠です。従わないように。とかのアイコンが欲しくない場合はそれでいいかもしれません。

最後に（もう最後のステップです）、CSSをいじいじします。FrontmatterでCSSをインポートしちゃいます。間違って<style>内でインポートしないように。

---
import remarkGithubAlerts from 'remark-github-alerts';
---

その後、色変数を指定します。:rootに指定するので、できるだけ根元のLayoutに指定するほうがいいかもしれません。お好きな色をどうぞ。

  /* Light theme */
  :root {
    --color-note: #0969da;
    --color-tip: #1a7f37;
    --color-important: #8250df;
    --color-warning: #9a6700;
    --color-caution: #d1242f;
  }

私はダークテーマと背景を設定したかったので、こうなりました。ダークテーマ自体の実装方法は、流石に他の記事で学んでください。

  /* Light theme */
  :root {
    /* ... */

    --color-note: #0969da;
    --color-note-bg: rgba(9, 105, 218, 0.1);
    --color-tip: #1a7f37;
    --color-tip-bg: rgba(26, 127, 55, 0.1);
    --color-important: #8250df;
    --color-important-bg: rgba(130, 80, 223, 0.1);
    --color-warning: #9a6700;
    --color-warning-bg: rgba(154, 103, 0, 0.1);
    --color-caution: #d1242f;
    --color-caution-bg: rgba(209, 36, 47, 0.1);
  }

  /* Dark theme */
  .dark {
    /* ... */

    --color-note: #4493f8;
    --color-tip: #3fb950;
    --color-important: #a371f7;
    --color-warning: #d29922;
    --color-caution: #f85149;
  }

やることは以上です。これだけで、このレイアウトを適用できるようにしたMarkdownファイルに

> [!NOTE] タイトルはここに書く
> 情報だよん

と書くだけで、ブロックを召喚できるはずです。

背景を付ける場合

このブログは、独自レイアウトとしてヒントに背景を付けています。

    /* Note */
    .markdown-alert-note {
      background-color: var(--color-note-bg);
    }

    /* Tip */
    .markdown-alert-tip {
      background-color: var(--color-tip-bg);
    }

    /* Important */
    .markdown-alert-important {
      background-color: var(--color-important-bg);
    }
    /* Warning */
    .markdown-alert-warning {
      background-color: var(--color-warning-bg);
    }

    /* Caution */
    .markdown-alert-caution {
      background-color: var(--color-caution-bg);
    }