feat: enhance code examples with language support and improve styling in Core Usage and Quick Start sections

Author: orangekame3

src/components/CoreUsage.astro

@@ -1,8 +1,11 @@
 ---
+import { Code } from "astro:components";
+
 const examples = [
   {
     title: "Define Components",
     description: "Create typed components with Pydantic v2 models.",
+    lang: "python" as const,
     code: `from cryo_wiring_core import (
     CooldownBuilder, ChipConfig, CooldownMetadata,
     Attenuator, Filter, Isolator, Amplifier, Stage,
@@ -20,6 +23,7 @@ catalog = {
   {
     title: "Build a Cooldown",
     description: "Fluent builder API with per-line overrides.",
+    lang: "python" as const,
     code: `cooldown = (
     CooldownBuilder(
         chip=ChipConfig(name="sample-8q", num_qubits=8, qubits_per_readout_line=4),
@@ -44,6 +48,7 @@ catalog = {
   {
     title: "Summary & Diagram",
     description: "Generate terminal tables, Markdown, HTML, and publication-quality SVG diagrams.",
+    lang: "python" as const,
     code: `# Print a Rich-formatted table to the terminal
 cooldown.summary()
 
@@ -57,6 +62,7 @@ cooldown.diagram(output="wiring.svg", representative=True)`,
   {
     title: "Export & Validate",
     description: "Write YAML files and validate against the spec.",
+    lang: "python" as const,
     code: `# Export as a cooldown directory
 cooldown.write("output/")
 # output/
@@ -92,7 +98,9 @@ validate_wiring(data)  # raises jsonschema.ValidationError on failure`,
                 <p class="example-description">{example.description}</p>
               </div>
             </div>
-            <pre class="example-code"><code>{example.code}</code></pre>
+            <div class="example-code-wrapper">
+              <Code code={example.code} lang={example.lang} theme="github-dark" />
+            </div>
           </div>
         ))
       }
@@ -177,18 +185,21 @@ validate_wiring(data)  # raises jsonschema.ValidationError on failure`,
     color: var(--color-text-muted);
   }
 
-  .example-code {
-    padding: 1.25rem 1.5rem;
+  .example-code-wrapper {
     overflow-x: auto;
-    margin: 0;
   }
 
-  .example-code code {
-    font-family: var(--font-mono);
+  .example-code-wrapper :global(pre) {
+    margin: 0;
+    padding: 1.25rem 1.5rem;
+    border-radius: 0;
     font-size: 0.8rem;
-    color: var(--color-success);
     line-height: 1.65;
-    white-space: pre;
+    background: transparent !important;
+  }
+
+  .example-code-wrapper :global(code) {
+    font-family: var(--font-mono);
   }
 
   .core-links {

src/components/QuickStart.astro

@@ -1,18 +1,23 @@
 ---
+import { Code } from "astro:components";
+
 const steps = [
   {
     step: "01",
     title: "Install the CLI",
+    lang: "bash" as const,
     code: "pip install cryo-wiring-cli",
   },
   {
     step: "02",
     title: "Create a new fridge",
+    lang: "bash" as const,
     code: "cryo-wiring new --fridge my-cryo --chip chip.yaml",
   },
   {
     step: "03",
     title: "Edit your wiring",
+    lang: "yaml" as const,
     code: `# my-cryo/current/control.yaml
 modules:
   ctrl:
@@ -33,17 +38,20 @@ lines:
   {
     step: "04",
     title: "Build & validate",
+    lang: "bash" as const,
     code: `cryo-wiring build my-cryo/current/
 cryo-wiring validate my-cryo/current/`,
   },
   {
     step: "05",
     title: "Generate diagrams",
+    lang: "bash" as const,
     code: "cryo-wiring diagram my-cryo/current/",
   },
   {
     step: "06",
     title: "Snapshot a cooldown",
+    lang: "bash" as const,
     code: "cryo-wiring snapshot my-cryo",
   },
 ];
@@ -62,7 +70,9 @@ cryo-wiring validate my-cryo/current/`,
             <div class="step-number">{item.step}</div>
             <div class="step-body">
               <h3 class="step-title">{item.title}</h3>
-              <pre class="step-code"><code>{item.code}</code></pre>
+              <div class="step-code-wrapper">
+                <Code code={item.code} lang={item.lang} theme="github-dark" />
+              </div>
             </div>
           </div>
         ))
@@ -114,19 +124,22 @@ cryo-wiring validate my-cryo/current/`,
     margin-bottom: 0.5rem;
   }
 
-  .step-code {
-    background: var(--color-bg-card);
+  .step-code-wrapper {
     border: 1px solid var(--color-border);
     border-radius: 0.5rem;
-    padding: 1rem 1.25rem;
     overflow-x: auto;
   }
 
-  .step-code code {
-    font-family: var(--font-mono);
+  .step-code-wrapper :global(pre) {
+    margin: 0;
+    padding: 1rem 1.25rem;
+    border-radius: 0.5rem;
     font-size: 0.825rem;
-    color: var(--color-success);
     line-height: 1.6;
-    white-space: pre;
+    background: var(--color-bg-card) !important;
+  }
+
+  .step-code-wrapper :global(code) {
+    font-family: var(--font-mono);
   }
 </style>