Feature/design code block

[riiimparm]

コードブロックに astro-expressive-code を使用

テスト用md

---
title: test
pubDate: '2026-07-31'
description: test
author: RiiiM
tags: [Tech]
---

Astro の `astro-expressive-code` で使えるコードブロック記法のサンプル集です。
TypeScript / JSON / Bash を中心に、ファイルパス指定・wrap・ワードマーカー・
マーカーライン・diff などをまとめています。

---

## 1. ファイルパス（title）

### TypeScript

```ts title="src/utils/greet.ts"
// title="..." でファイルパスをタブ風に表示する例
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

JSON

JSON はコメート構文を持たないため、説明は本文側に記載します（title はそのまま使えます）。

{
  "name": "my-astro-app",
  "version": "1.0.0",
  "type": "module"
}

Bash

# title="..." でファイルパスを表示する例
npm run build
npm run deploy

---

2. wrap（長い行の折り返し）

// wrap を付けると横スクロールせずに折り返し表示される例
export const longString =
  "これはとても長い文字列のサンプルです。wrap を指定すると、通常は横スクロールになる長い行も自動的に折り返されて表示されます。";

# wrap 指定なしだと横スクロールになる長いコマンドの例
curl -X POST https://example.com/api/v1/very/long/endpoint/path?query=1&another_query_param=2&yet_another=3

---

3. マーカーライン（行ハイライト）

行番号を { } で指定してハイライトします。範囲・複数指定も可能です。

// 2〜3行目をハイライトする例
function add(a: number, b: number) {
  return a + b; // ← このあたりがハイライトされる
}

// 1行目と4行目だけを個別指定する例（カンマ区切り）
import { z } from "zod";

const schema = z.object({});
export default schema;

行単位の追加・削除マーカー（ins / del）

// del/ins で「削除された行」「追加された行」を示す例
const oldValue = 1;
const newValue = 2;

---

4. ワードマーカー（単語・正規表現の強調）

文字列で囲むと単語単位のハイライト、/.../ で正規表現ハイライトになります。

// 文字列マーカー "greet" と 正規表現マーカー /Hello.*?!/ の例
function greet(name: string) {
  return `Hello, ${name}!`;
}

単語単位の追加・削除マーカー（ins= / del=）

// 単語単位で ins（追加）/ del（削除）を示す例
function oldFunction() {
  return "before";
}
function newFunction() {
  return "after";
}

---

5. diff 構文

diff 言語を使うと + / - プレフィックスでそのまま差分表示になります。

// diff 構文でファイル差分を表示する例
- console.log("old");
+ console.log("new");
  console.log("unchanged");

// diff + lang でシンタックスハイライト付き diff にする例
  {
    "name": "my-astro-app",
-   "version": "1.0.0"
+   "version": "1.1.0"
  }

// bash スクリプトの diff の例
  #!/bin/bash
- npm run build
+ npm run build:prod
  npm run deploy

---

6. 複合例（title + マーカーライン + ワードマーカー + wrap）

#!/bin/bash
npm install
echo "セットアップが完了しました。長いメッセージで wrap の折り返し動作も確認します。"

---

7. ターミナル風フレーム（frame="terminal"）

# frame="terminal" でターミナルウィンドウ風に見せる例
npm create astro@latest

---

8. 行番号表示（showLineNumbers）

// showLineNumbers で行番号を表示する例
export function square(x: number) {
  return x * x;
}

export function cube(x: number) {
  return x * x * x;
}

---

9. 折りたたみ（collapse）

// collapse={1-3} で指定行を折りたたみ表示にする例
import a from "a";
import b from "b";
import c from "c";

export function main() {
  console.log("main");
}

---

10. まとめ表（フロンティマター的な指定一覧）

属性	用途	例
title="..."	ファイルパス/タイトル表示	```ts title="src/a.ts"
{2-4}	マーカーライン（行ハイライト）	```ts {2-4}
ins={n} / del={n}	行単位の追加/削除マーカー	```ts ins={2} del={3}
"word" / /regex/	ワードマーカー	```ts "greet" /Hi.*!/
ins="word" / del="word"	単語単位の追加/削除マーカー	```ts ins="foo" del="bar"
wrap	長い行の折り返し	```ts wrap
frame="terminal"	ターミナル風フレーム	```bash frame="terminal"
showLineNumbers	行番号表示	```ts showLineNumbers
collapse={1-3}	指定行の折りたたみ	```ts collapse={1-3}
```diff	diff構文（+/-表示）	```diff title="x.ts"

[naoki-00-ito]

@riiimparm
LGTM!

まとめ表（フロンティマター的な指定一覧）
がわかりやすいのでreadmeにも書いておいても良いかなと思ったけど、なくても問題はないのでお任せします！

[riiimparm]

たしかに。READMEに追記しました!
ドキュメント変更なのでこのままマージするね@
abef6db