- pnpm
- Node.js
- Astro
- shadcn/ui
pnpm dlx shadcn-ui@latest add追加できるコンポーネントはshadcn/uiを参照してください。
依存インストール
pnpm install --frozen-lockfile開発サーバー起動
pnpm devビルド
pnpm buildプレビュー
pnpm previewコード整形
pnpm format標準的な Markdown 記法（見出し、リスト、リンク等）に対応しています。
コードブロックの言語指定以降に以下属性を付与することで、多様なマーカーや装飾を追加できます。
| 属性 | 用途 | 例 |
|---|---|---|
| 先頭行のファイル名コメント | ファイルパス/タイトルを自動推測 | ```ts の1行目に // src/a.ts |
| 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" |
さらに詳しく Text & Line Markers
コードブロックの言語指定に mermaid を記述することで、フローチャートやシーケンス図などをレンダリングできます。
-
ブログ記事執筆用ブランチを作成する
-
(
blog-titleはタイトル等、記事を識別できる名称に置き換える)git flow feature start blog/blog-title
-
-
/src/content 配下に .md ファイルを作成する
-
ブログ記事執筆用をdevelopブランチへマージする
- マージ前にローカルで表示確認を行うこと
-
developブランチをmainブランチへマージする
- プルリクエスト作成時にプレビューURLが発行されるので、表示の確認を行うこと