この Blog での書き方

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

この記事の使い方

節は、文字とコード → 図と画像 → リンクとカード → 埋め込み → frontmatter の順に並べてある。目次から飛ぶ。
どの項目も、書き方(Markdown か YAML)のすぐ下に、実際の表示例を置いてある。
書き間違えるとビルドが落ちるものは、そう書いてある。黙って崩れたまま公開されることは無い。

文字とコード

本文の文字まわりと、コードブロックの書き方。

改行

段落の中で改行すると、表示でもそのまま改行になる(行末に空白を 2 つ置かなくてよい)。段落を分けるときは空行を挟む。

1 行目
2 行目

次の段落

1 行目
2 行目

次の段落

チェックボックスのリスト

リストの項目の頭に [ ] か [x] を書くと、チェックボックスになる(GitHub と同じ)。読む人が押して印を付け外しすることはできない。済んだことと残っていることを並べたいとき。

- [x] Proxmox を入れる
- [x] ネットワークの割り当てを決める
- [ ] バックアップを仕掛ける

Proxmox を入れる
ネットワークの割り当てを決める
バックアップを仕掛ける

絵文字

絵文字はそのまま貼ってよい。GitHub と同じ :名前: の短い書き方でも書ける。表に無い名前は、書いたまま残る。

そのまま貼る 🎉 / 短い書き方 :tada: :+1: :rocket:

そのまま貼る 🎉 / 短い書き方 🎉 👍 🚀

❤️ や ⚠️ のように、文字と絵文字の両方の形を持つ記号は、絵文字の形で出る(端末によって形が変わらないようにしてある)。文字の形で出したいときは、記号の後ろに ︎ を書く。

絵文字の形 ❤ ⚠ ✔ / 文字の形 ❤&#xFE0E; ⚠&#xFE0E; ✔&#xFE0E;

絵文字の形 ❤️ ⚠️ ✔️ / 文字の形 ❤︎ ⚠︎ ✔︎

コードと数式の中は、書いたまま出る(:tada: と書けば :tada: のまま)。

コードブロック

言語を書くと色が付く。明るい配色と暗い配色は、テーマの切り替えに合わせて入れ替わる(切り替えのために 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"

字下げした行を折り返すと、続きはその行の字下げの位置から始まる。端末の出力のように 1 桁目から始めたいときは preserveIndent=false を足す。

```ts wrap
export function describe(post: Post): string {
  return `${post.data.title}(${post.data.category})— ${post.data.description ?? "説明はまだ無い"}`;
}
```

export function describe(post: Post): string {
  return `${post.data.title}(${post.data.category})— ${post.data.description ?? "説明はまだ無い"}`;
}

1 桁目から始める書き方:

```txt wrap preserveIndent=false
    at render (file:///app/node_modules/some-library/dist/renderer/index.js:1234:56) with a very long message that keeps going
```

    at render (file:///app/node_modules/some-library/dist/renderer/index.js:1234:56) with a very long message that keeps going

行番号と枠

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

注意書きの枠

引用の先頭に種類を書くと、枠になる。種類は 3 つ。

> [!NOTE]
> 知っておくと読みやすくなること。

> [!WARNING]
> 気を付けないと詰まるところ。

> [!CAUTION]
> そのままやると壊れること。

情報

知っておくと読みやすくなること。

注意

気を付けないと詰まるところ。

警告

そのままやると壊れること。

GitHub と同じ記法なので、ここに貼る前の下書きを GitHub 上で読んでも同じ意味で読める。対応していない場所では、ただの引用として読める。

題を書かなければ、枠は種類の絵だけを添えて本文から始まる。印の行に続けて書くと、それが題になる。

> [!WARNING] ディスクを消す前に
> 消したものは戻せない。

注意:ディスクを消す前に

消したものは戻せない。

題を書いた枠は、GitHub 上ではただの引用として出る(GitHub は、印の行に他の文字があると枠にしない)。

印は大文字でも小文字でもよい。受け付けない印を書くとビルドが落ちるので、[!WARNNING] のような打ち間違いが黙って引用に化けることはない。

枠の中には、段落でも箇条書きでも表でもコードでも数式でも置ける。

> [!WARNING]
> 中に入れたものは、外と同じように出る。
>
> ```sh
> pnpm check
> ```
>
> | 種類 | 使いどころ |
> |---|---|
> | 情報 | 補足 |
> | 注意 | 詰まるところ |

注意

中に入れたものは、外と同じように出る。

pnpm check

種類	使いどころ
情報	補足
注意	詰まるところ

折りたたみ

同じ形で [!DETAILS] と書き、そのうしろに題を書くと折りたたみになる。畳んだ状態で始まり、題を押すと開く。開け閉めに JavaScript は動いていない。

> [!DETAILS] 長い出力を畳んでおく
> 読まなくても本文が続くもの。
>
> ```sh
> systemctl status minecraft
> ```

長い出力を畳んでおく

読まなくても本文が続くもの。

systemctl status minecraft

畳んだままでもページ内検索と、このサイトの検索では中身が見つかる。開いた状態で始める書き方は用意していない。開けておきたいものは、畳まずに書く。

数式

$ で囲むと文の中に数式が入る。たとえば計算量が $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 とフォントは、数式のある記事にだけ配られる。

表

GFM の表。: の位置で列の揃えを決める。列が多くて幅に収まらない表は、表だけが横に送れる。

| 記法 | 使いどころ | 行数 |
|:---|:---|---:|
| コードブロック | 手順とコマンド | 12 |
| 注意書き | 詰まるところ | 3 |

記法	使いどころ	行数
コードブロック	手順とコマンド	12
注意書き	詰まるところ	3

表の直前に 表: キャプション の 1 行を書くと、表の題になって表の上に出る。表の直前でない「表: …」の行は、ふつうの段落のまま。

表: 記法と使いどころ

| 記法 | 使いどころ |
|:---|:---|
| コードブロック | 手順とコマンド |
| 注意書き | 詰まるところ |

記法と使いどころ
記法	使いどころ
コードブロック	手順とコマンド
注意書き	詰まるところ

脚注

[^名前] を文に置き、同じ名前の中身をどこかに書くと、番号が振られて記事の末尾に集まる。番号は書いた順ではなく、文に出てきた順に振られる。

脚注を付けた文[^why]。

[^why]: 本文の流れを切らずに、補足を置ける。

脚注を付けた文¹。

本文に書ける HTML

Markdown に記法の無い形だけは、HTML で書ける。キー・印・上付きと下付き・略語・用語の並び。

保存は <kbd>Ctrl</kbd> + <kbd>S</kbd>。<mark>ここだけ</mark>見ればよい。

水は H<sub>2</sub>O、広さは 20 m<sup>2</sup>。<abbr title="Content Security Policy">CSP</abbr> で外への通信を絞る。

<dl>
  <dt>表紙</dt>
  <dd>押すまで相手へ接続しない埋め込み。</dd>
</dl>

保存は Ctrl + S。ここだけ見ればよい。

水は H₂O、広さは 20 m²。CSP で外への通信を絞る。

表紙: 押すまで相手へ接続しない埋め込み。

それ以外の要素(<div>・<br>・<iframe> など)や属性(style・class など)を書くと、ビルドが落ちる。そのとき、書ける要素の一覧と、代わりの書き方(<br> ならそのまま改行する、<details> なら > [!DETAILS])を言う。コードブロックと文中のコードの中は、何を書いてもよい。

図と画像

図も写真も、記事のディレクトリに置いて相対パスで参照する。

図

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

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

Mermaid で書く図

mermaid のコードブロックに書くと図になる。accTitle と accDescr に書いた文が、読み上げで図の代わりに読まれる(書かないとビルドが落ちる)。title を足すとキャプションになる。

```mermaid title="記事が読者に届くまで"
flowchart LR
  accTitle: 記事が読者に届くまで
  accDescr: 手元で書いた記事を push すると、ビルドされて CDN から読者へ配られる
  write[手元で書く] -->|push| build[ビルド]
  build --> cdn[CDN]
  cdn --> reader[読者のブラウザ]
```

記事が読者に届くまで。手元で書いた記事を push すると、ビルドされて CDN から読者へ配られる — 記事が読者に届くまで

図は読むときに描いているのではなく、書いたあとに pnpm diagrams を叩いて SVG にしておく。図を書き換えたのに叩き忘れると、ビルドが落ちて教えてくれる。明るい配色と暗い配色の 2 枚が作られ、テーマに合わせて入れ替わる。横に長い図は、図だけが横に送れる。図の色はサイトの色に合わせてある。

フローチャートのほかに、シーケンス図・状態図・ER 図も同じ書き方で描ける。

記事を開いたとき。読者が記事を開くと、CDN が持っていればそのまま返し、無ければ配信元から取ってくる — 記事を開いたとき

記事の状態。枝で書いている記事は、main に入ると公開され、更新するとまた枝で書く — 記事の状態

記事と分類。記事はカテゴリを 1 つ持ち、タグをいくつでも持てる — 記事と分類

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

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

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

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

写真を横に並べる

同じ段落に 2 枚以上書くと横に並ぶ。題は 1 枚ずつ付く。狭い画面では縦に積まれ、3 枚を超えると次の段へ折り返す。

![この記事を明るい配色で開いた画面](./light.png "明るい配色") ![この記事を暗い配色で開いた画面](./dark.png "暗い配色")

段落を分けると 1 枚ずつ縦に積まれる。縦に長い写真は、画面より低い高さで頭打ちになる。

文の中の画像

文の途中に画像を書くと、字の高さで文の中に出る。バッジや小さな印を文に添えたいとき。押しても大きくは開かない(開くのは、行に 1 つだけ置いた画像)。

このサイトの印は ![このサイトの印](./mark.svg) で、ブラウザのタブにも出ている。

このサイトの印はで、ブラウザのタブにも出ている。

リンクとカード

外のページ・このサイトの記事・同じ記事の中へのリンク。

リンクカード

段落に URL を 1 本だけ置くと、相手のページの題・説明・絵を添えたカードになる。

https://github.com/gomagom

gomagom - Overview

gomagom has 7 repositories available. Follow their code on GitHub.

GitHub

題や絵はビルドのたびに取りに行かず、pnpm link-cards が一度だけ取ってきて保存したものを使う。まだ取っていない URL は、ただのリンクとして出る(ビルドは止まらない)。

カードにしたくないときは、ラベルを付けるか文の中に書く。ラベルを付けたリンクはカードにならない。

このサイトの記事の URL を同じように置くと、その記事の題・説明・表紙でカードになる。こちらは相手のページを取りに行かず、手元の記事から作る。まだ公開していない記事にも張れる。

https://gomatamago.net/blog/home-server-overview/

自宅サーバの構成をひととおり書き出す

家に置いてあるサーバで何を動かしているのか、どういう方針で組んでいるのかをまとめた。

gomatamago

書いたら pnpm link-cards を叩く。張った先の記事の題や表紙を直したのに叩き直し忘れると、ビルドが落ちて教えてくれる。

ページ内リンク

見出しには名前が付いているので、# のうしろに見出しの語を書くと、同じ記事の中の見出しへ飛べる。見出しの横の #(PC では見出しにカーソルを当てると出る)を押すと、その見出しへのリンクがアドレス欄に入る。

カードの作り方は[リンクカードの節](#リンクカード)に書いた。

カードの作り方はリンクカードの節に書いた。

ほかの記事の見出しへも、URL のうしろに同じように # を足して張れる。見出しの語を直して飛び先が無くなると、ビルドが落ちて教えてくれる。

紹介料を受け取るリンク(アフィリエイト)

Amazon のアソシエイトのリンクは、SiteStripe の「テキスト」で作ったリンク(https://amzn.to/…)か、tag= の付いた Amazon の URL を、ふつうのリンクとして書く。

[商品の名前](https://amzn.to/xxxxxxx)

ビルドが、リンクの直後に「広告」の印を付け、rel="sponsored" を足す。書き手は印を書かない。

URL だけを 1 行に置いても、カードにはならない(リンクのまま印が付く)。
商品の画像は使わない(画像は Amazon から読むことになり、表示しただけで外へ送る)。
楽天と A8.net のリンクは使わない(楽天は規約がリンクへの属性の追加を禁じ、A8.net は表示しただけで外へ送る)。書くとビルドが落ちる。
紹介のリンクを初めて書く記事と同じ日に、Site Policy へ Amazon の表示の文を足す(無いと本番のビルドが落ちる)。

埋め込み

動画・コードの作例・投稿・Gist の URL を、リンクカードと同じように段落に 1 本だけ置くと、その場に埋め込まれる。

直接と表紙

埋め込みには 2 つの形がある。何も書かなければ直接になる。

違い	直接(既定)	表紙
見え方	相手の画面がその場に出る(読む人が近づいたときに読み込む)	表紙(題と絵)が出て、押すとその場で相手の画面が開く。X・Bluesky の投稿はカードだけで、その場では開かない
外への接続	近づいた時点で相手へ接続する	押すまで接続しない。X・Bluesky の投稿は記事の中では接続せず、カードの「〜で見る」を押すと相手のページへ移る
写真や動画	相手の画面の中で見られる	押すまで見えない。X・Bluesky のカードは本文だけ(Bluesky は画像も)
重さ	相手の画面の分だけ重い(コードの作例は特に重い)	表紙の絵だけ
印刷	相手の画面は刷らず、題と URL を刷る(X・Bluesky の投稿はカード)	直接と同じ

Instagram の投稿は、ほかの動画や作例と同じく、表紙を押すとその場で開く。

形の選び方

記事の全部か相手ごとに、frontmatter の embeds で選ぶ。1 本だけ変えたいときは、URL の段落のすぐ前の行に印を書く。印が frontmatter より先に効く。

# 記事の全部を表紙にする
embeds: cover

# 相手ごとに選ぶ(書いていない相手は直接)
embeds:
  youtube: cover
  stackblitz: cover

<!-- embed: cover -->
https://www.youtube.com/watch?v=jNQXAC9IVRw

印は注釈なので、ほかの Markdown 処理系では表示されず URL の 1 行だけが残る。形は direct と cover の 2 つ。相手の名前は youtube・codepen・instagram・x のような小文字の英字で、知らない名前・知らない形を書いたり、印の次が形を選べる埋め込みの URL でなかったりすると、ビルドが落ちる。Gist はいつもこのサイトのコードブロックで、選べない。

下の作例は、同じ URL を直接と表紙で並べてある。書き方はどれも同じで、2 本目の前に印を書いただけ。

https://www.youtube.com/watch?v=jNQXAC9IVRw

<!-- embed: cover -->
https://www.youtube.com/watch?v=jNQXAC9IVRw

動画

YouTube の動画。直接の形でも、勝手に再生は始まらない。youtu.be の短い形や、?t=90 のような開始位置も書ける。表紙の絵は pnpm link-cards が取ってきて保存する。動画ではない YouTube のページはカードになる。

直接:

Me at the zoo

YouTube

表紙:

Me at the zoo

YouTube

コードの作例

CodePen・StackBlitz・CodeSandbox の作例。開いた画面の明暗は、このサイトの明暗に合わせる。実行環境は重いので、並べる記事では表紙の形にするとよい。URL は作例のページのものをそのまま貼ればよい。StackBlitz は ?file= を付けると、最初に開くファイルを選べる。

CodePen(直接・表紙):

CodePen の作例(team/codepen/pen/PNaGbb)

CodePen

CodePen の作例(team/codepen/pen/PNaGbb)

CodePen

CodePen は絵を取らせてくれないので、表紙は URL から作った題だけになる。

StackBlitz(直接・表紙):

Typescript (forked) - StackBlitz

StackBlitz

Typescript (forked) - StackBlitz

StackBlitz

CodeSandbox(直接・表紙):

React - CodeSandbox

CodeSandbox

React - CodeSandbox

CodeSandbox

StackBlitz のうち、Node の環境(WebContainers)で動くプロジェクト(Vite の雛形など)は、埋め込むと動かない(埋め込む側のページに、このサイトが掛けていないヘッダを求める)。pnpm link-cards が公開前に StackBlitz へどちらの環境かを尋ね、そういう作例はどちらの形でもカードで置く(押すと相手のページが開く)。上の TypeScript の雛形は、埋め込んでも動く側(EngineBlock)で動く。

X と Bluesky の投稿

直接の形では、まず投稿者・本文・日時を並べたカードが出て、読む人が近づくと相手の投稿の画面(写真や動画も入る)に入れ替わる。表紙の形ではカードだけで、X や Bluesky へは接続しない。カードは pnpm link-cards が公開前に取ってきて保存したもので、相手の画面が読めないとき(塞がれているなど)と印刷では、直接の形でもカードのまま残る。Bluesky はカードにも投稿の画像を、このサイトから配る(X のカードは本文だけ)。

X(直接・表紙):

Bluesky(直接・表紙):

カードに描くのは投稿の本文だけで、引用した投稿や動画は元の投稿で見てもらう(カードの「〜で見る」から飛べる)。相手が投稿を消すと、定期の外へのリンクの検査が落ちて教えてくれるので、記事から外して pnpm link-cards --prune を叩く。

Instagram の投稿

Instagram の投稿とリール。高さは投稿ごとに違うので、直接の形では読み込んだ画面の高さに合わせて伸び縮みする。共有の印(?igsh=…)が付いた URL をそのまま貼ってもよい。Instagram は題も絵も取らせてくれないので、表紙は URL から作った題だけになる(押すとその場で開く)。

直接:

Instagram の投稿(p/Ddwoj5kBk9X)

Instagram

表紙:

Instagram の投稿(p/Ddwoj5kBk9X)

Instagram

Gist

GitHub Gist の URL は、このサイトのコードブロックとして出る(直接・表紙の区別は無い)。コピーや折り返しは、本文に書いたコードブロックと同じように効く。下に「GitHub Gist で見る」のリンクが 1 本付く。

https://gist.github.com/octocat/9257657

# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so

# Packages #
############
# it's better to unpack these files and commit the raw source
# git has its own built in compression methods
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip

# Logs and databases #
######################
*.log
*.sql
*.sqlite

# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

.gitignore を GitHub Gist で見る

中身は pnpm link-cards が公開前に取ってきて保存したもので、記事を開いても Gist へは接続しない。まだ取っていない Gist は、ただのリンクとして出る。

ファイルが複数ある Gist は、全部が並ぶ。1 つだけ見せたいときは、Gist のページでそのファイルへ飛んだときの #file-… を URL に付ける。当たるファイルが無いと、ビルドが落ちて教えてくれる。URL に版(コミットの SHA)まで書くと、Gist が書き換えられてもその版のまま出る。

埋め込みのコードを貼ったとき

各サービスの「埋め込む」が出すコード(<iframe>・Gist の <script>・X の <blockquote class="twitter-tweet">・Bluesky の <blockquote class="bluesky-embed">・Instagram の <blockquote class="instagram-media"> など)は、本文に貼れない。貼るとビルドが落ち、コードの中から URL を拾って、代わりに置く 1 行を名指しする。

<script src="https://gist.github.com/octocat/9257657.js"></script>

→ 埋め込みにするなら、この URL を 1 行で置く: https://gist.github.com/octocat/9257657(文中のリンクにするなら [文](https://gist.github.com/octocat/9257657))

言われた URL を 1 行で置き直せば、上のどれかになる。

frontmatter

記事の頭の --- で挟んだところ(frontmatter)に書くと、本文の外に部品が付く。書ける項目は決まっていて、項目の名前を打ち間違えるとビルドが落ちる。

埋め込みの形(embeds)は、埋め込みの節に書いた。

検証環境

手順を確かめた OS やソフトの名前と版を書くと、記事の頭に表で出る。

environment:
  - name: Proxmox VE
    version: "9.0"
  - name: Debian
    version: "13"

検証環境

Proxmox VE: 9.0
Debian: 13

版は引用符で囲む。囲まないと 9.0 は数として読まれて 9 になるので、数を書くとビルドが落ちる。

更新履歴

更新した日と、何を変えたかを 1 行ずつ書くと、記事の後ろに新しい順で並ぶ。この記事の後ろにも出ている。

updated: 2026-09-26
history:
  - date: 2026-09-26
    note: 埋め込み(作例・Gist・投稿)、本文に書ける HTML、frontmatter の書き方を足した

いちばん新しい行の日は updated と同じ日にする(違うとビルドが落ちる)。公開した日の行は、書かなくても最後に付く。

古い記事への注意

最後に更新してから時間がたった記事には、記事の頭に「手順やソフトの版が変わっていることがある」という注意が出る。ビルドのあとで古くなった記事にも、読む人のブラウザが開いた日に出す。考え方や振り返りのように版に依らない記事では、切っておく。

staleNotice: false

下書きと予約

draft: true の記事と、published が未来の記事は、本番のビルドから外れる(pnpm dev とプレビューでは見える)。

draft: true

published: 2026-10-01T07:00:00+09:00

予約した記事は、その時刻を過ぎたあとの定期のビルドで出る。日付だけを書くと、その日の日本時間の 9 時になる。

旧 URL

記事のディレクトリ名(= URL)を変えたときは、前の URL を書いておくと、そこから今の URL へ転送される。この記事の frontmatter にも 1 本書いてある。

aliases:
  - /blog/notation-guide/

書かなくても付くもの

印刷すると、ヘッダや右の列は省き、本文を紙の幅いっぱいに明るい配色で印刷する。閉じた折りたたみは開いて印刷し、外へのリンクには URL を添える(リンクの文字が URL そのものなら添えない)。このサイトの検索の結果から記事を開くと、検索した語に本文の中で印が付く。

本文の流れを切らずに、補足を置ける。末尾の記号を押すと、読んでいた場所へ戻る。 ↩︎