diff --git a/src/components/RenderFile.tsx b/src/components/RenderFile.tsx new file mode 100644 index 0000000..cba2f2a --- /dev/null +++ b/src/components/RenderFile.tsx @@ -0,0 +1,29 @@ +import readRawText from "@/lib/getRawText"; +import { useEffect, useState } from "preact/hooks"; + +type RenderHtmlProps = { + path: string; +}; + +export default function RenderFile(props: RenderHtmlProps) { + const [htmlContent, setHtmlContent] = useState( + readRawText(props.path), + ); + + useEffect(() => { + const text = readRawText(props.path); + setHtmlContent(text); + }, [props.path]); + + return ( +
+
+
+ ); +} diff --git a/src/components/RenderHtml.tsx b/src/components/RenderHtml.tsx new file mode 100644 index 0000000..dc6ee06 --- /dev/null +++ b/src/components/RenderHtml.tsx @@ -0,0 +1,17 @@ +type RenderHtmlProps = { + html: string; +}; + +export default function RenderHtml(props: RenderHtmlProps) { + return ( +
+
+
+ ); +} diff --git a/src/pages/html/00-introduction.mdx b/src/pages/html/00-introduction.mdx index 905503c..f4259d5 100644 --- a/src/pages/html/00-introduction.mdx +++ b/src/pages/html/00-introduction.mdx @@ -14,5 +14,3 @@ これから、このHTMLの基本的な構造や要素について学んでいきましょう。 -```html file=src/playground/dummy.html -``` diff --git a/src/pages/html/01-my-first-html.mdx b/src/pages/html/01-my-first-html.mdx new file mode 100644 index 0000000..a17838e --- /dev/null +++ b/src/pages/html/01-my-first-html.mdx @@ -0,0 +1,123 @@ +--- +layout: "@/layouts/MarkdownLayout.astro" +--- + +import RenderFile from "@/components/RenderFile"; +import RenderHtml from "@/components/RenderHtml"; +export const title = "はじめてのHTML"; + +# {title} + +## TODO + +- とりあえず書いてみる +- タグの目的と役割 + - 見た目のためのタグ + - 構造のためのタグ +- 属性 + +## とりあえず書いてみよう (work) + +以下の場所にファイルを作成し、中身を自由に編集してみましょう。 +ルールは特にありません。 + +`src/playground/html/first.html` + +例として、こんな感じで書いてみました。 + +```html file=src/sample/html/first.html +first.html +``` + +... + +... + +... + +`src/playground/html/first.html` は書けましたか？ +書けたらファイルをダブルクリックして、ブラウザで開いてみましょう。 + +例として用意したファイルの結果は、こんな感じになりました。 + + + +なにやら非常に簡素な見た目ですね、どうやら改行もされていないようです。 + +## タグ + +ここでHTMLのタグについて触れていきます。 +タグとは、ウェブページに**意味**、**構造**、**見た目**の情報を与えるための要素です。 + +ところで前回用意した例では、改行が反映されていませんでした。 +ここに、改行という見た目を与えるための`
`タグを追加してみました。 + +```html file=src/sample/html/first-with-br.html +first-with-br.html +``` + + + +ちゃんと改行されましたね！ + +もう1つ、個人的に`生まれてこの方...`の部分を強調したいなと思いました。 +そこで強調を意味する``タグを追加してみました。 + +```html file=src/sample/html/first-with-strong.html +first-with-strong.html +``` + + + +何やら文字が太字になりましたね。 + +この強調された部分は、``と``で囲まれていることに気づきましたか？ +範囲の終わりを示すタグ(=閉じタグ)には、タグ名の前にスラッシュ`/`が付きます。 +これをすることで、効果の範囲を指定できるのです。 + +```html +<タグ名>範囲 +``` + +ついでに色もつけちゃいましょう、``タグを使って赤色にしてみました。 + +```html file=src/sample/html/first-with-font.html +first-with-font.html +``` + + + +ちゃんと赤色になりましたね！ +赤色にしたい範囲を``と``で囲みました。 + +よく見ると、開始のタグには`color="red"`という部分がありますね。 +このfontタグにはcolorという**属性**が用意されており、これを使うことで色を指定できるのです。 + +```html +<タグ名 属性名="値">範囲 +``` + +```html +赤 +青 +暗めの緑 +``` + +export function SampleColor() { + return ( +
+ 赤 + 青 + 暗めの緑 +
+ ) +} + + + +:::note info +今回説明のためにfontタグを使いましたが、fontタグは現在非推奨となっています。 +実際に色を指定する場合は、後述する`CSS`を使うなどの方法を使用しましょう。 +::: + +## いろいろなタグ (work) diff --git a/src/plugins/remarkCodeFile.ts b/src/plugins/remarkCodeFile.ts index a4904a2..f0c43dd 100644 --- a/src/plugins/remarkCodeFile.ts +++ b/src/plugins/remarkCodeFile.ts @@ -3,22 +3,25 @@ import { visit } from "unist-util-visit"; export default function remarkCodeFile() { - return (tree: any, file: any) => { - visit(tree, "code", (node) => { - if (!node.meta) return; + return (tree: any, file: any) => { + visit(tree, "code", (node) => { + console.log("Processing code node with meta:", node.meta); - const match = node.meta.match(/file=(.+)/); - if (!match) return; + if (!node.meta) return; - const relativePath = match[1].trim(); - const fullPath = path.resolve(process.cwd(), relativePath); + const match = node.meta.match(/file=(.+)/); + if (!match) return; - if (!fs.existsSync(fullPath)) { - throw new Error(`Code file not found: ${relativePath}`); - } + const relativePath = match[1].trim(); + const fullPath = path.resolve(process.cwd(), relativePath); - node.value = fs.readFileSync(fullPath, "utf8"); - node.meta = undefined; // meta は消しておく（任意） - }); - }; + if (!fs.existsSync(fullPath)) { + node.value = `Error: File not found - ${relativePath}`; + return; + } + + node.value = fs.readFileSync(fullPath, "utf8"); + node.meta = undefined; // meta は消しておく（任意） + }); + }; } diff --git a/src/sample/html/first-with-br.html b/src/sample/html/first-with-br.html new file mode 100644 index 0000000..2b3f1fb --- /dev/null +++ b/src/sample/html/first-with-br.html @@ -0,0 +1,7 @@ +こんにちは！
+このサンプルを作ったもつにさんです。
+
+なんでもつになのかって？
+残念ながら、自分でもよくわかっていません・・・
+
+ちなみにもつ煮は、生まれてこの方片手で数えるほどしか食べたことがありません。
diff --git a/src/sample/html/first-with-font.html b/src/sample/html/first-with-font.html new file mode 100644 index 0000000..7d5b90e --- /dev/null +++ b/src/sample/html/first-with-font.html @@ -0,0 +1,7 @@ +こんにちは！
+このサンプルを作ったもつにさんです。
+
+なんでもつになのかって？
+残念ながら、自分でもよくわかっていません・・・
+
+ちなみにもつ煮は、生まれてこの方片手で数えるほどしか食べたことがありません。
diff --git a/src/sample/html/first-with-strong.html b/src/sample/html/first-with-strong.html new file mode 100644 index 0000000..0ae0c5d --- /dev/null +++ b/src/sample/html/first-with-strong.html @@ -0,0 +1,7 @@ +こんにちは！
+このサンプルを作ったもつにさんです。
+
+なんでもつになのかって？
+残念ながら、自分でもよくわかっていません・・・
+
+ちなみにもつ煮は、生まれてこの方片手で数えるほどしか食べたことがありません。
diff --git a/src/sample/html/first.html b/src/sample/html/first.html new file mode 100644 index 0000000..03b74c4 --- /dev/null +++ b/src/sample/html/first.html @@ -0,0 +1,7 @@ +こんにちは！ +このサンプルを作ったもつにさんです。 + +なんでもつになのかって？ +残念ながら、自分でもよくわかっていません・・・ + +ちなみにもつ煮は、生まれてこの方片手で数えるほどしか食べたことがありません。