このブログで使える記法まとめ

blogmemo

このブログで使える記法のサンプル集です。新しい記事を書くときのテンプレートとして使えます。

見出しと段落

見出しは ## から使います（# は記事タイトルが使うので本文では使いません）。段落は空行で区切ります。

強調や斜体、インラインコードも使えます。文中のリンクはAstroのドキュメントのように書くと、カードにならず普通のリンクのままです。

小見出し

### でひとつ下のレベルの見出しになります。

リストと引用

  • 箇条書きはハイフンで
  • ネストもできます
    • こんなふうに
  1. 番号付きリスト
  2. 手順の説明に便利

引用はこのように表示されます。 複数行も書けます。

コードブロック

言語を指定するとシンタックスハイライトがつきます。ダークモードでは自動的にダーク用のテーマに切り替わります。

type Post = {
  title: string;
  tags: string[];
};


export function byTag(posts: Post[], tag: string): Post[] {
  return posts.filter((post) => post.tags.includes(tag));
}

シェルコマンドの例。

Terminal window
npm run dev      # 開発サーバー
npm run build    # 静的ビルド

リンクカード

URLを行に単独で貼ると、ビルド時に横長のリンクカードに変換されます。

MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org

表

記法用途
**強調**太字にする
> 引用引用ブロック
行頭のURLリンクカード

アラート

GitHub風のアラート記法が使えます。> [!NOTE] のように書きます。

Note

補足情報はNOTEで書きます。

Tip

ちょっとした小技はTIP。

Warning

注意してほしいことはWARNING。

Caution

危険な操作はCAUTION。

数式

TeX記法で数式が書けます。インラインは E=mc2E = mc^2 のように、ブロックは次のように表示されます。

∫−∞∞e−x2 dx=π\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

Mermaid図

コードブロックの言語に mermaid を指定すると図になります。

graph LR
  A[記事を書く] --> B[git push]
  B --> C[自動ビルド]
  C --> D[公開]

frontmatterのメモ

  • description を省略すると本文の冒頭から自動生成されます
  • updatedDate を書くと更新日が表示されます（この記事で使っています）
  • tags は配列で複数指定できます