diff --git a/astro.config.mjs b/astro.config.mjs
index 5bd748d..5fdf49a 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,10 +1,15 @@
// @ts-check
+import remarkCodeFile from './src/plugins/remarkCodeFile';
+
import mdx from '@astrojs/mdx';
import preact from '@astrojs/preact';
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({
- integrations: [mdx(), preact()],
+ integrations: [mdx(), preact()],
+ markdown: {
+ remarkPlugins: [remarkCodeFile],
+ }
});
diff --git a/package.json b/package.json
index d101e98..e0e1efe 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
"@astrojs/preact": "^4.1.3",
"astro": "^5.16.5",
"github-markdown-css": "^5.8.1",
- "preact": "^10.28.0"
+ "preact": "^10.28.0",
+ "unist-util-visit": "^5.0.0"
},
"devDependencies": {
"@biomejs/biome": "2.3.8"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ae49c0..e8a66f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@
preact:
specifier: ^10.28.0
version: 10.28.0
+ unist-util-visit:
+ specifier: ^5.0.0
+ version: 5.0.0
devDependencies:
'@biomejs/biome':
specifier: 2.3.8
diff --git a/src/lib/getRawText.ts b/src/lib/getRawText.ts
new file mode 100644
index 0000000..3cb97c5
--- /dev/null
+++ b/src/lib/getRawText.ts
@@ -0,0 +1,17 @@
+import fs from "node:fs";
+import path from "node:path";
+
+/**
+ * 指定されたパスのファイルをプレーンテキストとして読み込む
+ * @param relativePath project root からの相対パス
+ */
+export default function readRawText(relativePath: string): string {
+ console.log(`Reading file from path: ${relativePath}`);
+ const fullPath = path.resolve(process.cwd(), relativePath);
+
+ if (!fs.existsSync(fullPath)) {
+ throw new Error(`File not found: ${fullPath}`);
+ }
+
+ return fs.readFileSync(fullPath, "utf8");
+}
diff --git a/src/pages/html/0-introduction.mdx b/src/pages/html/0-introduction.mdx
index d900915..905503c 100644
--- a/src/pages/html/0-introduction.mdx
+++ b/src/pages/html/0-introduction.mdx
@@ -8,3 +8,11 @@
export const title = "HTMLってなに？";
# {title}
+
+HTML (HyperText Markup Language) は、ウェブページを作成するための標準的なマークアップ言語です。
+あなたが普段インターネットで閲覧している全てが、HTMLで構築されていると言っても過言ではありません。
+
+これから、このHTMLの基本的な構造や要素について学んでいきましょう。
+
+```html file=src/playground/dummy.html
+```
diff --git a/src/pages/tips/ai.mdx b/src/pages/tips/ai.mdx
new file mode 100644
index 0000000..01f37c6
--- /dev/null
+++ b/src/pages/tips/ai.mdx
@@ -0,0 +1,7 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "AIと開発"
+
+# {title}
diff --git a/src/pages/tips/developper-tools.mdx b/src/pages/tips/developper-tools.mdx
new file mode 100644
index 0000000..a089a18
--- /dev/null
+++ b/src/pages/tips/developper-tools.mdx
@@ -0,0 +1,7 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "開発者ツール";
+
+# {title}
diff --git a/src/playground/dummy.html b/src/playground/dummy.html
new file mode 100644
index 0000000..8a1237e
--- /dev/null
+++ b/src/playground/dummy.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Dummy Page
+
+
+
+ This is a Dummy Page
+ Content goes here.
+
+
+
diff --git a/src/plugins/remarkCodeFile.ts b/src/plugins/remarkCodeFile.ts
new file mode 100644
index 0000000..a4904a2
--- /dev/null
+++ b/src/plugins/remarkCodeFile.ts
@@ -0,0 +1,24 @@
+import fs from "node:fs";
+import path from "node:path";
+import { visit } from "unist-util-visit";
+
+export default function remarkCodeFile() {
+ return (tree: any, file: any) => {
+ visit(tree, "code", (node) => {
+ if (!node.meta) return;
+
+ const match = node.meta.match(/file=(.+)/);
+ if (!match) return;
+
+ const relativePath = match[1].trim();
+ const fullPath = path.resolve(process.cwd(), relativePath);
+
+ if (!fs.existsSync(fullPath)) {
+ throw new Error(`Code file not found: ${relativePath}`);
+ }
+
+ node.value = fs.readFileSync(fullPath, "utf8");
+ node.meta = undefined; // meta は消しておく（任意）
+ });
+ };
+}