{ "id": "code-highlight-lines", "schemaVersion": 2, "title": { "ja": "コードの 1 枚 — 行番号、強調する行、右の注記を番号で結ぶ", "en": "Code Slide — Line Numbers, Highlighted Lines, Notes Tied by Number" }, "summary": { "ja": "等幅のコードを行番号つきで左に置き、要の 3 行だけに面を敷いて行末に番号の印を付ける。右に同じ番号で、何行目が何をするかを書く", "en": "Monospaced code with line numbers on the left; only the three key lines are shaded and marked at their ends, and notes on the right explain them by the same numbers" }, "capturedAt": "2026-10-19", "categories": [ "presentation" ], "tags": [ "minimal", "typography" ], "useCases": [ "article" ], "format": "slide-16x9", "density": "medium", "layout": { "kind": "annotated", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 88, "right": 140, "bottom": 56, "left": 140 } }, "type": { "kicker": { "size": 22, "weight": 500, "tracking": "0.12em", "numeric": "tabular" }, "title": { "size": 50, "weight": 700, "leading": 1.4, "numeric": "tabular" }, "lineNo": { "size": 20, "weight": 400, "leading": 1.5, "numeric": "tabular" }, "code": { "size": 24, "weight": 400, "leading": 1.5, "numeric": "tabular" }, "markNo": { "size": 24, "weight": 700, "numeric": "tabular" }, "noteLine": { "size": 20, "weight": 400, "numeric": "tabular" }, "noteHead": { "size": 28, "weight": 700, "numeric": "tabular" }, "noteBody": { "size": 22, "weight": 400, "leading": 1.6, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FBFAF6", "surface": "#F1EFE8", "ink": "#1E1E1C", "muted": "#6B6A64", "accent": "#8A2B1E", "rule": "#DCD8CC", "series": [] }, "rules": [ { "ja": "強調する行は 3 行まで。全部を説明すると、どこが要か分からない", "en": "Highlight three lines at most — explain everything and nothing stands out" }, { "ja": "注記は「何をするか」と「なぜそう書くか」の 2 段。コードの読み上げにしない", "en": "Notes say what the line does and why — not a reading of the code" }, { "ja": "コードは 20 行まで、24px 以上。それ以上は省略して「…」で示す", "en": "Twenty lines at most, at 24px or more; elide the rest with an ellipsis" }, { "ja": "行番号と注記の両方に行番号を書き、目で往復できるようにする", "en": "Show the line number on both sides so the eye can travel back and forth" } ], "cover": "https://design-vault.pages.dev/_astro/cover.DnYoDj9a.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "callout-numbered-screen", "sequence-diagram-idempotent-payment-authorization", "architecture-3tier-stack" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "annotated", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 88, "right": 140, "bottom": 56, "left": 140 } }, "type": { "kicker": { "size": 22, "weight": 500, "tracking": "0.12em", "numeric": "tabular" }, "title": { "size": 50, "weight": 700, "leading": 1.4, "numeric": "tabular" }, "lineNo": { "size": 20, "weight": 400, "leading": 1.5, "numeric": "tabular" }, "code": { "size": 24, "weight": 400, "leading": 1.5, "numeric": "tabular" }, "markNo": { "size": 24, "weight": 700, "numeric": "tabular" }, "noteLine": { "size": 20, "weight": 400, "numeric": "tabular" }, "noteHead": { "size": 28, "weight": 700, "numeric": "tabular" }, "noteBody": { "size": 22, "weight": 400, "leading": 1.6, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FBFAF6", "surface": "#F1EFE8", "ink": "#1E1E1C", "muted": "#6B6A64", "accent": "#8A2B1E", "rule": "#DCD8CC" }, "rules": [ "Highlight three lines at most — explain everything and nothing stands out", "Notes say what the line does and why — not a reading of the code", "Twenty lines at most, at 24px or more; elide the rest with an ellipsis", "Show the line number on both sides so the eye can travel back and forth" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 88 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 500 / 字間 0.12em / 等幅数字\ntitle 50px / 700 / 行送り 1.4 / 等幅数字\nlineNo 20px / 400 / 行送り 1.5 / 等幅数字\ncode 24px / 400 / 行送り 1.5 / 等幅数字\nmarkNo 24px / 700 / 等幅数字\nnoteLine 20px / 400 / 等幅数字\nnoteHead 28px / 700 / 等幅数字\nnoteBody 22px / 400 / 行送り 1.6 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC\n\n## 外すと崩れる点\n- 強調する行は 3 行まで。全部を説明すると、どこが要か分からない\n- 注記は「何をするか」と「なぜそう書くか」の 2 段。コードの読み上げにしない\n- コードは 20 行まで、24px 以上。それ以上は省略して「…」で示す\n- 行番号と注記の両方に行番号を書き、目で往復できるようにする\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/code-highlight-lines/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 88 right 140 bottom 56 left 140\n\n## Type (px against a 1920px canvas)\nkicker 22px / 500 / tracking 0.12em / tabular numerals\ntitle 50px / 700 / leading 1.4 / tabular numerals\nlineNo 20px / 400 / leading 1.5 / tabular numerals\ncode 24px / 400 / leading 1.5 / tabular numerals\nmarkNo 24px / 700 / tabular numerals\nnoteLine 20px / 400 / tabular numerals\nnoteHead 28px / 700 / tabular numerals\nnoteBody 22px / 400 / leading 1.6 / tabular numerals\nfolio 16px / 400 / tabular numerals\n\n## Colour\nGround #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC\n\n## Constraints — dropping these breaks it\n- Highlight three lines at most — explain everything and nothing stands out\n- Notes say what the line does and why — not a reading of the code\n- Twenty lines at most, at 24px or more; elide the rest with an ellipsis\n- Show the line number on both sides so the eye can travel back and forth\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/code-highlight-lines/pattern.html." }, "code": { "html": "\n\nコードの 1 枚 — 行番号、強調する行、右の注記を番号で結ぶ\n\n\n\n\n\n\n
\n
\n
\n

実装

\n

束ね配信は、毎正時に列を空にするだけで作れる

\n
\n
\n
\n

1type Notice = { id: string; from: string; at: Date };

\n

2

\n

3const HOUR = 60 * 60 * 1000;

\n

4const queue: Notice[] = [];

\n

5

\n

6// 届いた通知は渡さずに、列にためる

\n

7export function receive(n: Notice) {

\n

8 queue.push(n);

\n

9}

\n

10

\n

11export function startBatching(deliver: (ns: Notice[]) => void) {

\n

12 const wait = HOUR - (Date.now() % HOUR);1

\n

13 setTimeout(() => {

\n

14 deliver(queue.splice(0));2

\n

15 setInterval(() => deliver(queue.splice(0)), HOUR);3

\n

16 }, wait);

\n

17}

\n
\n
  1. 1

    12 行目

    次の正時までの待ち時間を出す

    起動した時刻によらず、配信を毎時 0 分に揃える

  2. 2

    14 行目

    たまった分を一度に渡す

    splice(0) で列を空にし、同じ通知を二度渡さない

  3. 3

    15 行目

    以後は 1 時間ごと

    最初の 1 回だけ待ち時間がずれ、2 回目からは等間隔

\n
\n
\n

山野ほか　通知の束ね配信と作業の中断

\n

08

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/code-highlight-lines/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/code-highlight-lines/font.css", "https://design-vault.pages.dev/designs/code-highlight-lines/font-0.woff2", "https://design-vault.pages.dev/designs/code-highlight-lines/font-1.woff2", "https://design-vault.pages.dev/designs/code-highlight-lines/font-2.woff2", "https://design-vault.pages.dev/designs/code-highlight-lines/font-3.woff2", "https://design-vault.pages.dev/designs/code-highlight-lines/font-4.woff2", "https://design-vault.pages.dev/designs/code-highlight-lines/font-5.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/code-highlight-lines", "en": "https://design-vault.pages.dev/en/designs/code-highlight-lines" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「研究・技術発表」の\n1 枚で、架空の研究「通知の束ね配信と作業の中断」の発表として描いてある。研究・著者・所属・数値・文献はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the nine research-talk pieces, drawn as the\ntalk for a fictional study; the study, authors, affiliations, figures and references are all invented.\n\n### Techniques\n\n- 行番号 72px・コード 1fr・印 48px の 3 列\n- 強調する行は強調色を面に 12% 混ぜた色\n- 等幅で表せない日本語の注釈は、ゴシックに落とす\n\n### Apply to\n\n- 技術発表・勉強会のコードの説明\n- 設計レビューで、変更の要所を示す" }