MetonaTeam/MetonaEditor
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(site): add white-space:pre-wrap to code block for proper line formatting

Browse Source 
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.
This commit is contained in:
thzxx
2026-07-23 20:16:56 +08:00
parent 86beddf63d
commit f080dcd1ff
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+16 -16
View File
@@ -262,18 +262,20 @@
.feature h3 { font-size: 17px; margin-bottom: 8px; font-weight: 600; } .feature h3 { font-size: 17px; margin-bottom: 8px; font-weight: 600; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.65; } .feature p { color: var(--muted); font-size: 14px; line-height: 1.65; }
/* Code */ /* Code */
.code-block { .code-block {
background: var(--bg-soft); background: var(--bg-soft);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
padding: 24px 26px; padding: 24px 26px;
overflow-x: auto; overflow-x: auto;
font-family: "SF Mono", "Cascadia Code", Consolas, monospace; font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
font-size: 13.5px; font-size: 13.5px;
line-height: 1.8; line-height: 1.8;
color: #e6e8eb; color: #e6e8eb;
} white-space: pre-wrap;
tab-size: 2;
}
.code-block .c-key { color: #c792ea; } .code-block .c-key { color: #c792ea; }
.code-block .c-str { color: #c3e88d; } .code-block .c-str { color: #c3e88d; }
.code-block .c-fn { color: #82aaff; } .code-block .c-fn { color: #82aaff; }
@@ -489,8 +491,7 @@
<span class="section-eyebrow">Quick Start</span> <span class="section-eyebrow">Quick Start</span>
<h2 class="section-title">三行代码即可使用</h2> <h2 class="section-title">三行代码即可使用</h2>
<p class="section-sub">CDN 引入或 npm 安装，都只需要极少的代码。</p> <p class="section-sub">CDN 引入或 npm 安装，都只需要极少的代码。</p>
<div class="code-block"> <div class="code-block"><span class="c-com">&lt;!-- 浏览器直接引入 --&gt;</span>
<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">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">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> <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-punc">});</span>
<span class="c-com">// 链式 API</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> 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>
</div> </div>
</section> </section>