From f080dcd1ff31bfe8ced8f4d94587b7a39cb50a98 Mon Sep 17 00:00:00 2001
From: thzxx <1440196015@qq.com>
Date: Thu, 23 Jul 2026 20:16:56 +0800
Subject: [PATCH] fix(site): add white-space:pre-wrap to code block for proper
 line formatting

Root cause: .code-block was missing white-space:pre-wrap, causing all
newlines and indentation to collapse into a single line in the browser.
Also collapse open/close tags to avoid leading/trailing blank lines.
---
 site/index.html | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/site/index.html b/site/index.html
index bd0671f..445971d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -262,18 +262,20 @@
   .feature h3 { font-size: 17px; margin-bottom: 8px; font-weight: 600; }
   .feature p { color: var(--muted); font-size: 14px; line-height: 1.65; }
 
-  /* Code */
-  .code-block {
-    background: var(--bg-soft);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 24px 26px;
-    overflow-x: auto;
-    font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
-    font-size: 13.5px;
-    line-height: 1.8;
-    color: #e6e8eb;
-  }
+	  /* Code */
+	  .code-block {
+	    background: var(--bg-soft);
+	    border: 1px solid var(--border);
+	    border-radius: 12px;
+	    padding: 24px 26px;
+	    overflow-x: auto;
+	    font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
+	    font-size: 13.5px;
+	    line-height: 1.8;
+	    color: #e6e8eb;
+	    white-space: pre-wrap;
+	    tab-size: 2;
+	  }
 	  .code-block .c-key { color: #c792ea; }
 	  .code-block .c-str { color: #c3e88d; }
 	  .code-block .c-fn { color: #82aaff; }
@@ -489,8 +491,7 @@
     <span class="section-eyebrow">Quick Start</span>
     <h2 class="section-title">三行代码即可使用</h2>
     <p class="section-sub">CDN 引入或 npm 安装，都只需要极少的代码。</p>
-	    <div class="code-block">
-	<span class="c-com">&lt;!-- 浏览器直接引入 --&gt;</span>
+	    <div class="code-block"><span class="c-com">&lt;!-- 浏览器直接引入 --&gt;</span>
 	<span class="c-punc">&lt;</span><span class="c-key">script</span> <span class="c-fn">src</span><span class="c-punc">=</span><span class="c-str">"../dist/metona-editor.js"</span><span class="c-punc">&gt;&lt;/</span><span class="c-key">script</span><span class="c-punc">&gt;</span>
 	<span class="c-punc">&lt;</span><span class="c-key">div</span> <span class="c-fn">id</span><span class="c-punc">=</span><span class="c-str">"editor"</span><span class="c-punc">&gt;&lt;/</span><span class="c-key">div</span><span class="c-punc">&gt;</span>
 	<span class="c-punc">&lt;</span><span class="c-key">script</span><span class="c-punc">&gt;</span>
@@ -511,8 +512,7 @@
 	<span class="c-punc">});</span>
 
 	<span class="c-com">// 链式 API</span>
-	editor<span class="c-punc">.</span><span class="c-fn">exec</span><span class="c-punc">(</span><span class="c-str">'bold'</span><span class="c-punc">).</span><span class="c-fn">exec</span><span class="c-punc">(</span><span class="c-str">'h1'</span><span class="c-punc">).</span><span class="c-fn">focus</span><span class="c-punc">();</span>
-	    </div>
+	editor<span class="c-punc">.</span><span class="c-fn">exec</span><span class="c-punc">(</span><span class="c-str">'bold'</span><span class="c-punc">).</span><span class="c-fn">exec</span><span class="c-punc">(</span><span class="c-str">'h1'</span><span class="c-punc">).</span><span class="c-fn">focus</span><span class="c-punc">();</span></div>
   </div>
 </section>