この blog での書き方

記事を書くときに毎回思い出せないので、使える記法をひととおり並べておく。ここは見本であって解説ではないので、書き方と出来上がりだけを置く。

ただのコードブロック

言語を書くと色が付く。明るい配色と暗い配色は、テーマの切り替えに合わせて入れ替わる (切り替えのために JavaScript は動いていない)。

```ts
const answer = 42;
```

const answer = 42;

ファイル名を出す

title を書くと、エディタのタブのような枠になる。どのファイルの話かを本文で補わなくて済む。

```ts title="src/lib/posts.ts"
export function postPath(post: Post): string {
  return `/blog/${post.id}/`;
}
```

export function postPath(post: Post): string {
  return `/blog/${post.id}/`;
}

ターミナル

シェルの言語を書くと、枠がターミナルの見た目になる。title を足すと、どの機械の上で打っているかを書ける。

```sh title="手元"
pnpm check
```

pnpm check

行を強調する

{} の中に行番号(範囲も可)を書く。どこを見てほしいかを本文で「3 行目の」と書かずに済む。

```ts {2-3}
export function readingMinutes(body: string): number {
  const characters = body.replace(/\s+/gu, "").length;
  return Math.max(1, Math.ceil(characters / 500));
}
```

export function readingMinutes(body: string): number {
  const characters = body.replace(/\s+/gu, "").length;
  return Math.max(1, Math.ceil(characters / 500));
}

語を強調する

引用符で囲むと、その語を含むところに印が付く。正規表現も書ける。

```ts "trailingSlash" /always|directory/
export default defineConfig({
  trailingSlash: "always",
  build: { format: "directory" },
});
```

export default defineConfig({
  trailingSlash: "always",
  build: { format: "directory" },
});

足した行・消した行

ins= と del= で、追加と削除を色分けできる。差分の記法を使わずに「元のコードのまま」見せたいときはこちら。

```ts del={2} ins={3}
const posts = await getCollection("posts");
return posts;
return posts.sort(byPublishedDesc);
```

const posts = await getCollection("posts");
return posts;
return posts.sort(byPublishedDesc);

差分そのもの

diff で書くと行頭の + / - が印になる。lang を足すと、差分のままその言語の色も付く。

```diff lang="ts"
  const posts = await getCollection("posts");
- return posts;
+ return posts.sort(byPublishedDesc);
```

const posts = await getCollection("posts");
return posts;
return posts.sort(byPublishedDesc);

折り返す

既定では折らずに横スクロールする。1 行が長くて全部見せたいときだけ wrap。

```sh wrap
ssh goma1 "pct exec 110 -- systemctl show minecraft --property=ActiveState --property=SubState --property=ExecMainStartTimestamp"
```

ssh goma1 "pct exec 110 -- systemctl show minecraft --property=ActiveState --property=SubState --property=ExecMainStartTimestamp"

行番号

showLineNumbers を書いたブロックにだけ番号が出る。startLineNumber で途中から数えられるので、長いファイルの一部を引くときに使う。

```ts showLineNumbers startLineNumber=18
export async function getPublishedPosts(): Promise<Post[]> {
  const posts = await getCollection("posts");
  return posts.sort(byPublishedDesc);
}
```

18
export async function getPublishedPosts(): Promise<Post[]> {
19
  const posts = await getCollection("posts");
20
  return posts.sort(byPublishedDesc);
21
}

枠を消す

囲いが邪魔なときは frame="none"。

```sh frame="none"
git switch -c feat/something
```

git switch -c feat/something

文の中の数式

$ で囲むと文の中に数式が入る。たとえば計算量が $O(n \log n)$ である、のように書ける。

計算量が $O(n \log n)$ である。

行を分けた数式

$$ で囲むと、独立した行になる。

$$
\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
$$

\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

複数行そろえるときは aligned、場合分けは cases が使える。

\begin{aligned} P(\text{落ちる}) &= 1 - \prod_{i=1}^{n} (1 - p_i) \\ &\approx \sum_{i=1}^{n} p_i \quad (p_i \ll 1) \end{aligned}

f(x) = \begin{cases} 1 & (x \geq 0) \\ 0 & (x < 0) \end{cases}

数式もビルド時に組み上がっている。読むときに数式のための JavaScript は動かない。数式のための CSS とフォントは、数式のある記事にだけ配られる。

図

図は SVG を記事のディレクトリに置いて、画像として参照する。画像だけの段落は <figure> になり、"…" に書いた題がキャプションになる。

![読者のブラウザから CDN を経て、元のサーバへ向かう図](./flow.svg "経路の図")

図をコードとして書く記法(mermaid など)は使えない。書くとビルドが落ちて、代わりに何をすればよいかを言ってくる。理由は ADR 0015。

写真・スクリーンショット

写真やスクリーンショットも、記事のディレクトリに置いて相対パスで参照する。書き方は図と同じで、書いたあとの扱いが違う。

![ブログのトップページ](./rendered.png "置いた画像は幅ちがいで配られる")

置いた 1 枚から、画面の広さに合う幅の画像がビルド時に作られる。読む側は自分に必要な幅だけを落とす。本文の画像は下までスクロールして初めて読み込まれ、記事の先頭に置いた cover だけは先に読み込まれる。