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

fix(site): format code block syntax highlighting and clarify logo mark

Browse Source 
- Add .c-punc CSS class for punctuation coloring in code blocks
- Wrap all angle brackets, operators and delimiters in c-punc spans
- Add title/aria-label to logo-mark for accessibility and clarity
- Fix CDN path in code sample to match actual usage (../dist/...)
- Fix indentation consistency
This commit is contained in:
thzxx
2026-07-23 20:13:10 +08:00
parent 9e0c1d7a7f
commit 86beddf63d
1 changed files with 36 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+36 -35
View File
@@ -274,12 +274,13 @@
line-height: 1.8; line-height: 1.8;
color: #e6e8eb; color: #e6e8eb;
} }
.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; }
.code-block .c-com { color: #5c6370; font-style: italic; } .code-block .c-com { color: #5c6370; font-style: italic; }
.code-block .c-kw { color: #89ddff; } .code-block .c-kw { color: #89ddff; }
.code-block .c-num { color: #f78c6c; } .code-block .c-num { color: #f78c6c; }
.code-block .c-punc { color: #89ddff; opacity: 0.7; }
/* API 速览 */ /* API 速览 */
.api-grid { .api-grid {
@@ -369,13 +370,13 @@
</head> </head>
<body> <body>
<nav> <nav>
<div class="nav-inner"> <div class="nav-inner">
<a class="nav-brand" href="#"> <a class="nav-brand" href="#">
<span class="logo-mark">M</span> <span class="logo-mark" title="MetonaEditor" aria-label="MetonaEditor Logo">M</span>
MetonaEditor MetonaEditor
</a> </a>
<div class="nav-links"> <div class="nav-links">
<a href="#features">特性</a> <a href="#features">特性</a>
<a href="#demo">体验</a> <a href="#demo">体验</a>
<a href="#api">API</a> <a href="#api">API</a>
@@ -387,7 +388,7 @@
<header class="hero"> <header class="hero">
<div class="hero-deco"></div> <div class="hero-deco"></div>
<div class="logo"><span class="logo-mark">M</span> METONA EDITOR</div> <div class="logo"><span class="logo-mark" title="MetonaEditor" aria-label="MetonaEditor Logo">M</span> METONA EDITOR</div>
<h1>现代化零依赖的<br/><span class="grad">Markdown 编辑器</span></h1> <h1>现代化零依赖的<br/><span class="grad">Markdown 编辑器</span></h1>
<p class="tagline">单文件开箱即用，内置轻量解析器、分屏预览、插件系统与中文优先的国际化。为中文场景与现代 Web 应用而生。</p> <p class="tagline">单文件开箱即用，内置轻量解析器、分屏预览、插件系统与中文优先的国际化。为中文场景与现代 Web 应用而生。</p>
<div class="badges"> <div class="badges">
@@ -488,30 +489,30 @@
<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>
&lt;<span class="c-key">script</span> <span class="c-fn">src</span>=<span class="c-str">"dist/metona-editor.js"</span>&gt;&lt;/<span class="c-key">script</span>&gt; <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>
&lt;<span class="c-key">div</span> <span class="c-fn">id</span>=<span class="c-str">"editor"</span>&gt;&lt;/<span class="c-key">div</span>&gt; <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>
&lt;<span class="c-key">script</span>&gt; <span class="c-punc">&lt;</span><span class="c-key">script</span><span class="c-punc">&gt;</span>
<span class="c-kw">const</span> editor = <span class="c-fn">MeEditor.create</span>(<span class="c-str">'#editor'</span>, { <span class="c-kw">const</span> editor <span class="c-punc">=</span> <span class="c-fn">MeEditor.create</span><span class="c-punc">(</span><span class="c-str">'#editor'</span><span class="c-punc">,</span> <span class="c-punc">{</span>
<span class="c-fn">mode</span>: <span class="c-str">'split'</span>, <span class="c-fn">mode</span><span class="c-punc">:</span> <span class="c-str">'split'</span><span class="c-punc">,</span>
<span class="c-fn">value</span>: <span class="c-str">'# 你好，世界'</span>, <span class="c-fn">value</span><span class="c-punc">:</span> <span class="c-str">'# 你好，世界'</span><span class="c-punc">,</span>
<span class="c-fn">plugins</span>: [<span class="c-str">'autoSave'</span>, <span class="c-str">'exportTool'</span>] <span class="c-fn">plugins</span><span class="c-punc">:</span> <span class="c-punc">[</span><span class="c-str">'autoSave'</span><span class="c-punc">,</span> <span class="c-str">'exportTool'</span><span class="c-punc">]</span>
}); <span class="c-punc">});</span>
&lt;/<span class="c-key">script</span>&gt; <span class="c-punc">&lt;/</span><span class="c-key">script</span><span class="c-punc">&gt;</span>
<span class="c-com">// 或 npm 安装</span> <span class="c-com">// 或 npm 安装</span>
<span class="c-kw">import</span> MeEditor <span class="c-kw">from</span> <span class="c-str">'@metona-team/metona-editor'</span>; <span class="c-kw">import</span> MeEditor <span class="c-kw">from</span> <span class="c-str">'@metona-team/metona-editor'</span><span class="c-punc">;</span>
<span class="c-kw">const</span> editor = <span class="c-fn">MeEditor.create</span>(container, { <span class="c-kw">const</span> editor <span class="c-punc">=</span> <span class="c-fn">MeEditor.create</span><span class="c-punc">(</span>container<span class="c-punc">,</span> <span class="c-punc">{</span>
<span class="c-fn">mode</span>: <span class="c-str">'split'</span>, <span class="c-fn">mode</span><span class="c-punc">:</span> <span class="c-str">'split'</span><span class="c-punc">,</span>
<span class="c-fn">theme</span>: <span class="c-str">'dark'</span>, <span class="c-fn">theme</span><span class="c-punc">:</span> <span class="c-str">'dark'</span><span class="c-punc">,</span>
<span class="c-fn">onChange</span>: (value) =&gt; <span class="c-fn">console.log</span>(value) <span class="c-fn">onChange</span><span class="c-punc">:</span> <span class="c-punc">(</span>value<span class="c-punc">)</span> <span class="c-punc">=&gt;</span> <span class="c-fn">console.log</span><span class="c-punc">(</span>value<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-fn">exec</span>(<span class="c-str">'bold'</span>).<span class="c-fn">exec</span>(<span class="c-str">'h1'</span>).<span class="c-fn">focus</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>