<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>代码 on Hugo Narrow</title><link>https://zufrieden.github.io/labveilletech-pm/tags/%E4%BB%A3%E7%A0%81/</link><description>Recent content in 代码 on Hugo Narrow</description><generator>Hugo</generator><language>en-US</language><lastBuildDate>Tue, 16 Jan 2024 10:00:00 +0800</lastBuildDate><atom:link href="https://zufrieden.github.io/labveilletech-pm/tags/%E4%BB%A3%E7%A0%81/index.xml" rel="self" type="application/rss+xml"/><item><title>代码高亮测试</title><link>https://zufrieden.github.io/labveilletech-pm/posts/code-highlighting-test/</link><pubDate>Tue, 16 Jan 2024 10:00:00 +0800</pubDate><guid>https://zufrieden.github.io/labveilletech-pm/posts/code-highlighting-test/</guid><description>&lt;h1 id="代码高亮测试"&gt;代码高亮测试&lt;/h1&gt;
&lt;p&gt;本文用于测试新的代码高亮功能，包括语法高亮、复制按钮、语言显示等。&lt;/p&gt;
&lt;h2 id="javascript"&gt;JavaScript&lt;/h2&gt;
&lt;div
 class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"&gt;
 
 &lt;div
 class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"&gt;
 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;div class="text-muted-foreground flex-shrink-0"&gt;
 &lt;svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /&gt;
&lt;/svg&gt;
 &lt;/div&gt;
 &lt;span class="text-muted-foreground text-sm font-medium"&gt;
 JAVASCRIPT
 &lt;/span&gt;
 &lt;/div&gt;

 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;button
 class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-0"
 data-default-state="expanded"
 data-collapsed="false"
 data-auto-collapse-lines="30"
 data-auto-collapse-height="400"
 data-collapsed-height="120"
 title="Collapse"
 aria-label="Collapse"&gt;
 &lt;span class="collapse-icon"&gt;
 &lt;svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/&gt;&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="collapse-text hidden sm:inline"
 &gt;Collapse&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;button
 class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-0"
 title="Copy"
 aria-label="Copy"&gt;
 &lt;span class="copy-icon"&gt;
 &lt;svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /&gt;
&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="copy-text hidden sm:inline"
 &gt;Copy&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 
 &lt;div class="code-block-content relative" id="code-0"&gt;
 &lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sb"&gt;`第10个斐波那契数是：&lt;/span&gt;&lt;span class="si"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sb"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;// 异步/等待
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;asyncFunction&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kr"&gt;async&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kr"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;/api/data&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kr"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;获取数据时出错：&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;};&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 
 &lt;div
 class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"&gt;
 &lt;div
 class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"&gt;
 Click to expand and view more
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;


&lt;script&gt;
(function() {
 const codeId = 'code-0';
 const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]');
 const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]');
 const codeContainer = document.getElementById(codeId);

 if (!codeContainer) return;

 
 if (copyBtn) {
 const copyIcon = copyBtn.querySelector('.copy-icon');
 const copyText = copyBtn.querySelector('.copy-text');

 copyBtn.addEventListener('click', async function() {
 try {
 
 let codeText = '';

 
 const codeTableCell = codeContainer.querySelector('.lntd:last-child code');
 if (codeTableCell) {
 codeText = codeTableCell.textContent || codeTableCell.innerText;
 } else {
 
 const codeElement = codeContainer.querySelector('code');
 if (codeElement) {
 
 const hasInlineLineNumbers = codeElement.querySelector('.ln');
 if (hasInlineLineNumbers) {
 
 const codeLines = codeElement.querySelectorAll('.cl');
 if (codeLines.length &gt; 0) {
 codeText = Array.from(codeLines)
 .map(line =&gt; {
 const text = line.textContent || line.innerText;
 
 return text.replace(/\n+$/, '');
 })
 .join('\n')
 .replace(/\n+$/, ''); 
 } else {
 
 const allText = codeElement.textContent || codeElement.innerText;
 codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, '');
 }
 } else {
 
 codeText = codeElement.textContent || codeElement.innerText;
 }
 } else {
 
 codeText = codeContainer.textContent || codeContainer.innerText;
 }
 }

 
 codeText = codeText.trim();

 
 await navigator.clipboard.writeText(codeText);

 
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copied';
 }
 copyBtn.classList.add('text-green-600');

 
 setTimeout(() =&gt; {
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 copyBtn.classList.remove('text-green-600');
 }, 2000);

 } catch (err) {
 console.error('复制失败:', err);

 
 const range = document.createRange();
 const codeElement = codeContainer.querySelector('code') || codeContainer;
 range.selectNodeContents(codeElement);
 const selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range);

 
 if (copyText) {
 copyText.textContent = 'Selected';
 }

 setTimeout(() =&gt; {
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 selection.removeAllRanges();
 }, 2000);
 }
 });
 }

 
 if (collapseBtn) {
 const collapseIcon = collapseBtn.querySelector('.collapse-icon');
 const collapseText = collapseBtn.querySelector('.collapse-text');
 const collapseOverlay = codeContainer.querySelector('.collapse-overlay');

 
 let codeElement = codeContainer.querySelector('pre.chroma');
 if (!codeElement) {
 codeElement = codeContainer.querySelector('pre');
 }

 const defaultState = collapseBtn.dataset.defaultState || 'expanded';
 const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true';
 const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30;
 const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400;
 const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120;

 let isCollapsed = false;

 
 function initCollapse() {
 
 const shouldCollapse = isCollapsedAttr ||
 defaultState === 'collapsed' ||
 shouldAutoCollapse();

 if (shouldCollapse) {
 setCollapsed(true, false); 
 }
 }

 function shouldAutoCollapse() {
 
 if (codeElement) {
 const lines = codeElement.querySelectorAll('.line, .cl');
 const height = codeElement.offsetHeight;
 return lines.length &gt; autoCollapseLines || height &gt; autoCollapseHeight;
 }

 
 const containerHeight = codeContainer.offsetHeight;
 if (containerHeight &gt; autoCollapseHeight) {
 return true;
 }

 
 const textContent = codeContainer.textContent || codeContainer.innerText || '';
 const estimatedLines = textContent.split('\n').length;
 return estimatedLines &gt; autoCollapseLines;
 }

 function setCollapsed(collapsed, animate = true) {
 if (!collapseOverlay) return;

 isCollapsed = collapsed;

 if (collapsed) {
 
 codeContainer.style.maxHeight = collapsedHeight + 'px';
 codeContainer.style.overflow = 'hidden';
 collapseOverlay.style.opacity = '1';
 collapseOverlay.style.pointerEvents = 'auto';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Expand';
 }
 collapseBtn.title = 'Expand';

 } else {
 
 codeContainer.style.maxHeight = '';
 codeContainer.style.overflow = '';
 collapseOverlay.style.opacity = '0';
 collapseOverlay.style.pointerEvents = 'none';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Collapse';
 }
 collapseBtn.title = 'Collapse';
 }

 
 if (animate) {
 codeContainer.style.transition = 'max-height 0.3s ease-out';
 setTimeout(() =&gt; {
 codeContainer.style.transition = '';
 }, 300);
 }
 }

 function toggleCollapse() {
 setCollapsed(!isCollapsed, true);
 }

 
 collapseBtn.addEventListener('click', toggleCollapse);

 
 if (collapseOverlay) {
 collapseOverlay.addEventListener('click', () =&gt; {
 if (isCollapsed) {
 setCollapsed(false, true);
 }
 });
 }

 
 initCollapse();
 }
})();
&lt;/script&gt;
&lt;h2 id="带行号的代码块"&gt;带行号的代码块&lt;/h2&gt;
&lt;div
 class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"&gt;
 
 &lt;div
 class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"&gt;
 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;div class="text-muted-foreground flex-shrink-0"&gt;
 &lt;svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /&gt;
&lt;/svg&gt;
 &lt;/div&gt;
 &lt;span class="text-muted-foreground text-sm font-medium"&gt;
 PYTHON
 &lt;/span&gt;
 &lt;/div&gt;

 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;button
 class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-1"
 data-default-state="expanded"
 data-collapsed="false"
 data-auto-collapse-lines="30"
 data-auto-collapse-height="400"
 data-collapsed-height="120"
 title="Collapse"
 aria-label="Collapse"&gt;
 &lt;span class="collapse-icon"&gt;
 &lt;svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/&gt;&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="collapse-text hidden sm:inline"
 &gt;Collapse&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;button
 class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-1"
 title="Copy"
 aria-label="Copy"&gt;
 &lt;span class="copy-icon"&gt;
 &lt;svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /&gt;
&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="copy-text hidden sm:inline"
 &gt;Copy&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 
 &lt;div class="code-block-content relative" id="code-1"&gt;
 &lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-python" data-lang="python"&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 1&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 带行号的 Python 代码&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 2&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;asyncio&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 3&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;typing&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;List&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Optional&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 4&lt;/span&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 5&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;DataProcessor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 6&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="fm"&gt;__init__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;List&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;]):&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 7&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;data&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 8&lt;/span&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 9&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;process&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;Optional&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;]:&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;10&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="s2"&gt;&amp;#34;&amp;#34;&amp;#34;处理数据并返回结果&amp;#34;&amp;#34;&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;11&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;12&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;None&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;13&lt;/span&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;14&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;15&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="s1"&gt;&amp;#39;total&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;len&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;16&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="s1"&gt;&amp;#39;processed&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;17&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;18&lt;/span&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;19&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;item&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;20&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;validate_item&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;21&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;processed&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;22&lt;/span&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;23&lt;/span&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 
 &lt;div
 class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"&gt;
 &lt;div
 class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"&gt;
 Click to expand and view more
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;


&lt;script&gt;
(function() {
 const codeId = 'code-1';
 const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]');
 const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]');
 const codeContainer = document.getElementById(codeId);

 if (!codeContainer) return;

 
 if (copyBtn) {
 const copyIcon = copyBtn.querySelector('.copy-icon');
 const copyText = copyBtn.querySelector('.copy-text');

 copyBtn.addEventListener('click', async function() {
 try {
 
 let codeText = '';

 
 const codeTableCell = codeContainer.querySelector('.lntd:last-child code');
 if (codeTableCell) {
 codeText = codeTableCell.textContent || codeTableCell.innerText;
 } else {
 
 const codeElement = codeContainer.querySelector('code');
 if (codeElement) {
 
 const hasInlineLineNumbers = codeElement.querySelector('.ln');
 if (hasInlineLineNumbers) {
 
 const codeLines = codeElement.querySelectorAll('.cl');
 if (codeLines.length &gt; 0) {
 codeText = Array.from(codeLines)
 .map(line =&gt; {
 const text = line.textContent || line.innerText;
 
 return text.replace(/\n+$/, '');
 })
 .join('\n')
 .replace(/\n+$/, ''); 
 } else {
 
 const allText = codeElement.textContent || codeElement.innerText;
 codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, '');
 }
 } else {
 
 codeText = codeElement.textContent || codeElement.innerText;
 }
 } else {
 
 codeText = codeContainer.textContent || codeContainer.innerText;
 }
 }

 
 codeText = codeText.trim();

 
 await navigator.clipboard.writeText(codeText);

 
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copied';
 }
 copyBtn.classList.add('text-green-600');

 
 setTimeout(() =&gt; {
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 copyBtn.classList.remove('text-green-600');
 }, 2000);

 } catch (err) {
 console.error('复制失败:', err);

 
 const range = document.createRange();
 const codeElement = codeContainer.querySelector('code') || codeContainer;
 range.selectNodeContents(codeElement);
 const selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range);

 
 if (copyText) {
 copyText.textContent = 'Selected';
 }

 setTimeout(() =&gt; {
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 selection.removeAllRanges();
 }, 2000);
 }
 });
 }

 
 if (collapseBtn) {
 const collapseIcon = collapseBtn.querySelector('.collapse-icon');
 const collapseText = collapseBtn.querySelector('.collapse-text');
 const collapseOverlay = codeContainer.querySelector('.collapse-overlay');

 
 let codeElement = codeContainer.querySelector('pre.chroma');
 if (!codeElement) {
 codeElement = codeContainer.querySelector('pre');
 }

 const defaultState = collapseBtn.dataset.defaultState || 'expanded';
 const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true';
 const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30;
 const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400;
 const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120;

 let isCollapsed = false;

 
 function initCollapse() {
 
 const shouldCollapse = isCollapsedAttr ||
 defaultState === 'collapsed' ||
 shouldAutoCollapse();

 if (shouldCollapse) {
 setCollapsed(true, false); 
 }
 }

 function shouldAutoCollapse() {
 
 if (codeElement) {
 const lines = codeElement.querySelectorAll('.line, .cl');
 const height = codeElement.offsetHeight;
 return lines.length &gt; autoCollapseLines || height &gt; autoCollapseHeight;
 }

 
 const containerHeight = codeContainer.offsetHeight;
 if (containerHeight &gt; autoCollapseHeight) {
 return true;
 }

 
 const textContent = codeContainer.textContent || codeContainer.innerText || '';
 const estimatedLines = textContent.split('\n').length;
 return estimatedLines &gt; autoCollapseLines;
 }

 function setCollapsed(collapsed, animate = true) {
 if (!collapseOverlay) return;

 isCollapsed = collapsed;

 if (collapsed) {
 
 codeContainer.style.maxHeight = collapsedHeight + 'px';
 codeContainer.style.overflow = 'hidden';
 collapseOverlay.style.opacity = '1';
 collapseOverlay.style.pointerEvents = 'auto';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Expand';
 }
 collapseBtn.title = 'Expand';

 } else {
 
 codeContainer.style.maxHeight = '';
 codeContainer.style.overflow = '';
 collapseOverlay.style.opacity = '0';
 collapseOverlay.style.pointerEvents = 'none';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Collapse';
 }
 collapseBtn.title = 'Collapse';
 }

 
 if (animate) {
 codeContainer.style.transition = 'max-height 0.3s ease-out';
 setTimeout(() =&gt; {
 codeContainer.style.transition = '';
 }, 300);
 }
 }

 function toggleCollapse() {
 setCollapsed(!isCollapsed, true);
 }

 
 collapseBtn.addEventListener('click', toggleCollapse);

 
 if (collapseOverlay) {
 collapseOverlay.addEventListener('click', () =&gt; {
 if (isCollapsed) {
 setCollapsed(false, true);
 }
 });
 }

 
 initCollapse();
 }
})();
&lt;/script&gt;
&lt;h2 id="高亮特定行"&gt;高亮特定行&lt;/h2&gt;
&lt;div
 class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"&gt;
 
 &lt;div
 class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"&gt;
 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;div class="text-muted-foreground flex-shrink-0"&gt;
 &lt;svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /&gt;
&lt;/svg&gt;
 &lt;/div&gt;
 &lt;span class="text-muted-foreground text-sm font-medium"&gt;
 GO
 &lt;/span&gt;
 &lt;/div&gt;

 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;button
 class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-2"
 data-default-state="expanded"
 data-collapsed="false"
 data-auto-collapse-lines="30"
 data-auto-collapse-height="400"
 data-collapsed-height="120"
 title="Collapse"
 aria-label="Collapse"&gt;
 &lt;span class="collapse-icon"&gt;
 &lt;svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/&gt;&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="collapse-text hidden sm:inline"
 &gt;Collapse&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;button
 class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-2"
 title="Copy"
 aria-label="Copy"&gt;
 &lt;span class="copy-icon"&gt;
 &lt;svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /&gt;
&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="copy-text hidden sm:inline"
 &gt;Copy&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 
 &lt;div class="code-block-content relative" id="code-2"&gt;
 &lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go" data-lang="go"&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 1&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="kn"&gt;package&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;main&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 2&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line hl"&gt;&lt;span class="ln"&gt; 3&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="kn"&gt;import&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s"&gt;&amp;#34;fmt&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="c1"&gt;// 这一行将被高亮&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 4&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 5&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="kd"&gt;func&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line hl"&gt;&lt;span class="ln"&gt; 6&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;:=&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s"&gt;&amp;#34;你好，世界！&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="c1"&gt;// 这一行也将被高亮&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 7&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line hl"&gt;&lt;span class="ln"&gt; 8&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;fmt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;Println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="c1"&gt;// 这一行也将被高亮&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt; 9&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;10&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;:=&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;11&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;fmt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;Printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;计数：%d\n&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;12&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="ln"&gt;13&lt;/span&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 
 &lt;div
 class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"&gt;
 &lt;div
 class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"&gt;
 Click to expand and view more
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;


&lt;script&gt;
(function() {
 const codeId = 'code-2';
 const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]');
 const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]');
 const codeContainer = document.getElementById(codeId);

 if (!codeContainer) return;

 
 if (copyBtn) {
 const copyIcon = copyBtn.querySelector('.copy-icon');
 const copyText = copyBtn.querySelector('.copy-text');

 copyBtn.addEventListener('click', async function() {
 try {
 
 let codeText = '';

 
 const codeTableCell = codeContainer.querySelector('.lntd:last-child code');
 if (codeTableCell) {
 codeText = codeTableCell.textContent || codeTableCell.innerText;
 } else {
 
 const codeElement = codeContainer.querySelector('code');
 if (codeElement) {
 
 const hasInlineLineNumbers = codeElement.querySelector('.ln');
 if (hasInlineLineNumbers) {
 
 const codeLines = codeElement.querySelectorAll('.cl');
 if (codeLines.length &gt; 0) {
 codeText = Array.from(codeLines)
 .map(line =&gt; {
 const text = line.textContent || line.innerText;
 
 return text.replace(/\n+$/, '');
 })
 .join('\n')
 .replace(/\n+$/, ''); 
 } else {
 
 const allText = codeElement.textContent || codeElement.innerText;
 codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, '');
 }
 } else {
 
 codeText = codeElement.textContent || codeElement.innerText;
 }
 } else {
 
 codeText = codeContainer.textContent || codeContainer.innerText;
 }
 }

 
 codeText = codeText.trim();

 
 await navigator.clipboard.writeText(codeText);

 
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copied';
 }
 copyBtn.classList.add('text-green-600');

 
 setTimeout(() =&gt; {
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 copyBtn.classList.remove('text-green-600');
 }, 2000);

 } catch (err) {
 console.error('复制失败:', err);

 
 const range = document.createRange();
 const codeElement = codeContainer.querySelector('code') || codeContainer;
 range.selectNodeContents(codeElement);
 const selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range);

 
 if (copyText) {
 copyText.textContent = 'Selected';
 }

 setTimeout(() =&gt; {
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 selection.removeAllRanges();
 }, 2000);
 }
 });
 }

 
 if (collapseBtn) {
 const collapseIcon = collapseBtn.querySelector('.collapse-icon');
 const collapseText = collapseBtn.querySelector('.collapse-text');
 const collapseOverlay = codeContainer.querySelector('.collapse-overlay');

 
 let codeElement = codeContainer.querySelector('pre.chroma');
 if (!codeElement) {
 codeElement = codeContainer.querySelector('pre');
 }

 const defaultState = collapseBtn.dataset.defaultState || 'expanded';
 const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true';
 const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30;
 const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400;
 const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120;

 let isCollapsed = false;

 
 function initCollapse() {
 
 const shouldCollapse = isCollapsedAttr ||
 defaultState === 'collapsed' ||
 shouldAutoCollapse();

 if (shouldCollapse) {
 setCollapsed(true, false); 
 }
 }

 function shouldAutoCollapse() {
 
 if (codeElement) {
 const lines = codeElement.querySelectorAll('.line, .cl');
 const height = codeElement.offsetHeight;
 return lines.length &gt; autoCollapseLines || height &gt; autoCollapseHeight;
 }

 
 const containerHeight = codeContainer.offsetHeight;
 if (containerHeight &gt; autoCollapseHeight) {
 return true;
 }

 
 const textContent = codeContainer.textContent || codeContainer.innerText || '';
 const estimatedLines = textContent.split('\n').length;
 return estimatedLines &gt; autoCollapseLines;
 }

 function setCollapsed(collapsed, animate = true) {
 if (!collapseOverlay) return;

 isCollapsed = collapsed;

 if (collapsed) {
 
 codeContainer.style.maxHeight = collapsedHeight + 'px';
 codeContainer.style.overflow = 'hidden';
 collapseOverlay.style.opacity = '1';
 collapseOverlay.style.pointerEvents = 'auto';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Expand';
 }
 collapseBtn.title = 'Expand';

 } else {
 
 codeContainer.style.maxHeight = '';
 codeContainer.style.overflow = '';
 collapseOverlay.style.opacity = '0';
 collapseOverlay.style.pointerEvents = 'none';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Collapse';
 }
 collapseBtn.title = 'Collapse';
 }

 
 if (animate) {
 codeContainer.style.transition = 'max-height 0.3s ease-out';
 setTimeout(() =&gt; {
 codeContainer.style.transition = '';
 }, 300);
 }
 }

 function toggleCollapse() {
 setCollapsed(!isCollapsed, true);
 }

 
 collapseBtn.addEventListener('click', toggleCollapse);

 
 if (collapseOverlay) {
 collapseOverlay.addEventListener('click', () =&gt; {
 if (isCollapsed) {
 setCollapsed(false, true);
 }
 });
 }

 
 initCollapse();
 }
})();
&lt;/script&gt;
&lt;h2 id="带文件名的代码块"&gt;带文件名的代码块&lt;/h2&gt;
&lt;div
 class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"&gt;
 
 &lt;div
 class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"&gt;
 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;div class="text-muted-foreground flex-shrink-0"&gt;
 &lt;svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /&gt;
&lt;/svg&gt;
 &lt;/div&gt;
 &lt;span class="text-muted-foreground text-sm font-medium"&gt;
 api.ts
 &lt;/span&gt;
 &lt;/div&gt;

 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;button
 class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-3"
 data-default-state="expanded"
 data-collapsed="false"
 data-auto-collapse-lines="30"
 data-auto-collapse-height="400"
 data-collapsed-height="120"
 title="Collapse"
 aria-label="Collapse"&gt;
 &lt;span class="collapse-icon"&gt;
 &lt;svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/&gt;&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="collapse-text hidden sm:inline"
 &gt;Collapse&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;button
 class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-3"
 title="Copy"
 aria-label="Copy"&gt;
 &lt;span class="copy-icon"&gt;
 &lt;svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /&gt;
&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="copy-text hidden sm:inline"
 &gt;Copy&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 
 &lt;div class="code-block-content relative" id="code-3"&gt;
 &lt;div class="highlight" filename="api.ts"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-typescript" data-lang="typescript"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;// TypeScript API
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;ApiResponse&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;T&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;data&lt;/span&gt;: &lt;span class="kt"&gt;T&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;status&lt;/span&gt;: &lt;span class="kt"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;message&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;id&lt;/span&gt;: &lt;span class="kt"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;name&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;email&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;avatar?&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;ApiClient&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;baseURL&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;headers&lt;/span&gt;: &lt;span class="kt"&gt;Record&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;string&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;baseURL&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;apiKey?&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;baseURL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;baseURL&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;headers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="s1"&gt;&amp;#39;Content-Type&amp;#39;&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;application/json&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;...(&lt;/span&gt;&lt;span class="nx"&gt;apiKey&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;Authorization&amp;#39;&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="sb"&gt;`Bearer &lt;/span&gt;&lt;span class="si"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;apiKey&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sb"&gt;`&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;async&lt;/span&gt; &lt;span class="kr"&gt;get&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;T&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;(&lt;/span&gt;&lt;span class="nx"&gt;endpoint&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;ApiResponse&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;T&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sb"&gt;`&lt;/span&gt;&lt;span class="si"&gt;${&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;baseURL&lt;/span&gt;&lt;span class="si"&gt;}${&lt;/span&gt;&lt;span class="nx"&gt;endpoint&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sb"&gt;`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;method&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;GET&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;headers&lt;/span&gt;: &lt;span class="kt"&gt;this.headers&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sb"&gt;`HTTP 错误！状态：&lt;/span&gt;&lt;span class="si"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sb"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;async&lt;/span&gt; &lt;span class="nx"&gt;post&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;T&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;(&lt;/span&gt;&lt;span class="nx"&gt;endpoint&lt;/span&gt;: &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;: &lt;span class="kt"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;ApiResponse&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;T&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sb"&gt;`&lt;/span&gt;&lt;span class="si"&gt;${&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;baseURL&lt;/span&gt;&lt;span class="si"&gt;}${&lt;/span&gt;&lt;span class="nx"&gt;endpoint&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sb"&gt;`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;method&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;POST&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;headers&lt;/span&gt;: &lt;span class="kt"&gt;this.headers&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;body&lt;/span&gt;: &lt;span class="kt"&gt;JSON.stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;ApiClient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;https://api.example.com&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;your-api-key&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;getUsers&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;User&lt;/span&gt;&lt;span class="err"&gt;[]&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kr"&gt;get&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;User&lt;/span&gt;&lt;span class="err"&gt;[]&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;/users&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;获取用户时出错：&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 
 &lt;div
 class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"&gt;
 &lt;div
 class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"&gt;
 Click to expand and view more
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;


&lt;script&gt;
(function() {
 const codeId = 'code-3';
 const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]');
 const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]');
 const codeContainer = document.getElementById(codeId);

 if (!codeContainer) return;

 
 if (copyBtn) {
 const copyIcon = copyBtn.querySelector('.copy-icon');
 const copyText = copyBtn.querySelector('.copy-text');

 copyBtn.addEventListener('click', async function() {
 try {
 
 let codeText = '';

 
 const codeTableCell = codeContainer.querySelector('.lntd:last-child code');
 if (codeTableCell) {
 codeText = codeTableCell.textContent || codeTableCell.innerText;
 } else {
 
 const codeElement = codeContainer.querySelector('code');
 if (codeElement) {
 
 const hasInlineLineNumbers = codeElement.querySelector('.ln');
 if (hasInlineLineNumbers) {
 
 const codeLines = codeElement.querySelectorAll('.cl');
 if (codeLines.length &gt; 0) {
 codeText = Array.from(codeLines)
 .map(line =&gt; {
 const text = line.textContent || line.innerText;
 
 return text.replace(/\n+$/, '');
 })
 .join('\n')
 .replace(/\n+$/, ''); 
 } else {
 
 const allText = codeElement.textContent || codeElement.innerText;
 codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, '');
 }
 } else {
 
 codeText = codeElement.textContent || codeElement.innerText;
 }
 } else {
 
 codeText = codeContainer.textContent || codeContainer.innerText;
 }
 }

 
 codeText = codeText.trim();

 
 await navigator.clipboard.writeText(codeText);

 
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copied';
 }
 copyBtn.classList.add('text-green-600');

 
 setTimeout(() =&gt; {
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 copyBtn.classList.remove('text-green-600');
 }, 2000);

 } catch (err) {
 console.error('复制失败:', err);

 
 const range = document.createRange();
 const codeElement = codeContainer.querySelector('code') || codeContainer;
 range.selectNodeContents(codeElement);
 const selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range);

 
 if (copyText) {
 copyText.textContent = 'Selected';
 }

 setTimeout(() =&gt; {
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 selection.removeAllRanges();
 }, 2000);
 }
 });
 }

 
 if (collapseBtn) {
 const collapseIcon = collapseBtn.querySelector('.collapse-icon');
 const collapseText = collapseBtn.querySelector('.collapse-text');
 const collapseOverlay = codeContainer.querySelector('.collapse-overlay');

 
 let codeElement = codeContainer.querySelector('pre.chroma');
 if (!codeElement) {
 codeElement = codeContainer.querySelector('pre');
 }

 const defaultState = collapseBtn.dataset.defaultState || 'expanded';
 const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true';
 const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30;
 const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400;
 const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120;

 let isCollapsed = false;

 
 function initCollapse() {
 
 const shouldCollapse = isCollapsedAttr ||
 defaultState === 'collapsed' ||
 shouldAutoCollapse();

 if (shouldCollapse) {
 setCollapsed(true, false); 
 }
 }

 function shouldAutoCollapse() {
 
 if (codeElement) {
 const lines = codeElement.querySelectorAll('.line, .cl');
 const height = codeElement.offsetHeight;
 return lines.length &gt; autoCollapseLines || height &gt; autoCollapseHeight;
 }

 
 const containerHeight = codeContainer.offsetHeight;
 if (containerHeight &gt; autoCollapseHeight) {
 return true;
 }

 
 const textContent = codeContainer.textContent || codeContainer.innerText || '';
 const estimatedLines = textContent.split('\n').length;
 return estimatedLines &gt; autoCollapseLines;
 }

 function setCollapsed(collapsed, animate = true) {
 if (!collapseOverlay) return;

 isCollapsed = collapsed;

 if (collapsed) {
 
 codeContainer.style.maxHeight = collapsedHeight + 'px';
 codeContainer.style.overflow = 'hidden';
 collapseOverlay.style.opacity = '1';
 collapseOverlay.style.pointerEvents = 'auto';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Expand';
 }
 collapseBtn.title = 'Expand';

 } else {
 
 codeContainer.style.maxHeight = '';
 codeContainer.style.overflow = '';
 collapseOverlay.style.opacity = '0';
 collapseOverlay.style.pointerEvents = 'none';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Collapse';
 }
 collapseBtn.title = 'Collapse';
 }

 
 if (animate) {
 codeContainer.style.transition = 'max-height 0.3s ease-out';
 setTimeout(() =&gt; {
 codeContainer.style.transition = '';
 }, 300);
 }
 }

 function toggleCollapse() {
 setCollapsed(!isCollapsed, true);
 }

 
 collapseBtn.addEventListener('click', toggleCollapse);

 
 if (collapseOverlay) {
 collapseOverlay.addEventListener('click', () =&gt; {
 if (isCollapsed) {
 setCollapsed(false, true);
 }
 });
 }

 
 initCollapse();
 }
})();
&lt;/script&gt;
&lt;h2 id="纯文本代码块"&gt;纯文本代码块&lt;/h2&gt;
&lt;div
 class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"&gt;
 
 &lt;div
 class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"&gt;
 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;div class="text-muted-foreground flex-shrink-0"&gt;
 &lt;svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /&gt;
&lt;/svg&gt;
 &lt;/div&gt;
 &lt;span class="text-muted-foreground text-sm font-medium"&gt;
 PLAINTEXT
 &lt;/span&gt;
 &lt;/div&gt;

 
 &lt;div class="flex items-center gap-2"&gt;
 &lt;button
 class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-4"
 data-default-state="expanded"
 data-collapsed="false"
 data-auto-collapse-lines="30"
 data-auto-collapse-height="400"
 data-collapsed-height="120"
 title="Collapse"
 aria-label="Collapse"&gt;
 &lt;span class="collapse-icon"&gt;
 &lt;svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/&gt;&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="collapse-text hidden sm:inline"
 &gt;Collapse&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;button
 class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none"
 data-code-id="code-4"
 title="Copy"
 aria-label="Copy"&gt;
 &lt;span class="copy-icon"&gt;
 &lt;svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /&gt;
&lt;/svg&gt;
 &lt;/span&gt;
 &lt;span class="copy-text hidden sm:inline"
 &gt;Copy&lt;/span
 &gt;
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 
 &lt;div class="code-block-content relative" id="code-4"&gt;
 &lt;pre tabindex="0"&gt;&lt;code&gt;这是一个纯文本代码块。
它不应该有语法高亮。
你可以在这里测试复制功能。

function test() {
 console.log(&amp;#34;这是一个测试。&amp;#34;);
}&lt;/code&gt;&lt;/pre&gt;
 
 &lt;div
 class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"&gt;
 &lt;div
 class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"&gt;
 Click to expand and view more
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;


&lt;script&gt;
(function() {
 const codeId = 'code-4';
 const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]');
 const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]');
 const codeContainer = document.getElementById(codeId);

 if (!codeContainer) return;

 
 if (copyBtn) {
 const copyIcon = copyBtn.querySelector('.copy-icon');
 const copyText = copyBtn.querySelector('.copy-text');

 copyBtn.addEventListener('click', async function() {
 try {
 
 let codeText = '';

 
 const codeTableCell = codeContainer.querySelector('.lntd:last-child code');
 if (codeTableCell) {
 codeText = codeTableCell.textContent || codeTableCell.innerText;
 } else {
 
 const codeElement = codeContainer.querySelector('code');
 if (codeElement) {
 
 const hasInlineLineNumbers = codeElement.querySelector('.ln');
 if (hasInlineLineNumbers) {
 
 const codeLines = codeElement.querySelectorAll('.cl');
 if (codeLines.length &gt; 0) {
 codeText = Array.from(codeLines)
 .map(line =&gt; {
 const text = line.textContent || line.innerText;
 
 return text.replace(/\n+$/, '');
 })
 .join('\n')
 .replace(/\n+$/, ''); 
 } else {
 
 const allText = codeElement.textContent || codeElement.innerText;
 codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, '');
 }
 } else {
 
 codeText = codeElement.textContent || codeElement.innerText;
 }
 } else {
 
 codeText = codeContainer.textContent || codeContainer.innerText;
 }
 }

 
 codeText = codeText.trim();

 
 await navigator.clipboard.writeText(codeText);

 
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copied';
 }
 copyBtn.classList.add('text-green-600');

 
 setTimeout(() =&gt; {
 copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 copyBtn.classList.remove('text-green-600');
 }, 2000);

 } catch (err) {
 console.error('复制失败:', err);

 
 const range = document.createRange();
 const codeElement = codeContainer.querySelector('code') || codeContainer;
 range.selectNodeContents(codeElement);
 const selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range);

 
 if (copyText) {
 copyText.textContent = 'Selected';
 }

 setTimeout(() =&gt; {
 if (copyText) {
 copyText.textContent = 'Copy';
 }
 selection.removeAllRanges();
 }, 2000);
 }
 });
 }

 
 if (collapseBtn) {
 const collapseIcon = collapseBtn.querySelector('.collapse-icon');
 const collapseText = collapseBtn.querySelector('.collapse-text');
 const collapseOverlay = codeContainer.querySelector('.collapse-overlay');

 
 let codeElement = codeContainer.querySelector('pre.chroma');
 if (!codeElement) {
 codeElement = codeContainer.querySelector('pre');
 }

 const defaultState = collapseBtn.dataset.defaultState || 'expanded';
 const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true';
 const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30;
 const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400;
 const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120;

 let isCollapsed = false;

 
 function initCollapse() {
 
 const shouldCollapse = isCollapsedAttr ||
 defaultState === 'collapsed' ||
 shouldAutoCollapse();

 if (shouldCollapse) {
 setCollapsed(true, false); 
 }
 }

 function shouldAutoCollapse() {
 
 if (codeElement) {
 const lines = codeElement.querySelectorAll('.line, .cl');
 const height = codeElement.offsetHeight;
 return lines.length &gt; autoCollapseLines || height &gt; autoCollapseHeight;
 }

 
 const containerHeight = codeContainer.offsetHeight;
 if (containerHeight &gt; autoCollapseHeight) {
 return true;
 }

 
 const textContent = codeContainer.textContent || codeContainer.innerText || '';
 const estimatedLines = textContent.split('\n').length;
 return estimatedLines &gt; autoCollapseLines;
 }

 function setCollapsed(collapsed, animate = true) {
 if (!collapseOverlay) return;

 isCollapsed = collapsed;

 if (collapsed) {
 
 codeContainer.style.maxHeight = collapsedHeight + 'px';
 codeContainer.style.overflow = 'hidden';
 collapseOverlay.style.opacity = '1';
 collapseOverlay.style.pointerEvents = 'auto';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Expand';
 }
 collapseBtn.title = 'Expand';

 } else {
 
 codeContainer.style.maxHeight = '';
 codeContainer.style.overflow = '';
 collapseOverlay.style.opacity = '0';
 collapseOverlay.style.pointerEvents = 'none';

 
 collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`;
 if (collapseText) {
 collapseText.textContent = 'Collapse';
 }
 collapseBtn.title = 'Collapse';
 }

 
 if (animate) {
 codeContainer.style.transition = 'max-height 0.3s ease-out';
 setTimeout(() =&gt; {
 codeContainer.style.transition = '';
 }, 300);
 }
 }

 function toggleCollapse() {
 setCollapsed(!isCollapsed, true);
 }

 
 collapseBtn.addEventListener('click', toggleCollapse);

 
 if (collapseOverlay) {
 collapseOverlay.addEventListener('click', () =&gt; {
 if (isCollapsed) {
 setCollapsed(false, true);
 }
 });
 }

 
 initCollapse();
 }
})();
&lt;/script&gt;
&lt;h2 id="行内代码"&gt;行内代码&lt;/h2&gt;
&lt;p&gt;这是一个行内代码示例：&lt;code&gt;const x = 42;&lt;/code&gt; 和 &lt;code&gt;npm install&lt;/code&gt; 以及 &lt;code&gt;git commit -m &amp;quot;更新&amp;quot;&lt;/code&gt;。&lt;/p&gt;</description></item></channel></rss>