/* 代码块容器样式 - 简化背景和阴影 */ .code-block-container { margin: 0.75rem 0; border-radius: 0.4rem; overflow: hidden; border: 1px solid #e2e8f0; background-color: transparent; position: relative; } /* 代码块标题栏 */ .code-block-header { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.6rem; background-color: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8rem; } /* 代码语言标签 */ .code-block-lang { font-weight: 600; color: #475569; display: flex; align-items: center; gap: 0.5rem; } .code-block-lang svg { width: 1rem; height: 1rem; } /* 复制按钮 */ .code-block-copy { background: transparent; border: none; cursor: pointer; color: #475569; display: flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.7rem; transition: all 0.2s ease; } .code-block-copy:hover { background-color: #e2e8f0; } .code-block-copy.copied { color: #10b981; } /* 代码内容容器 - 修改为 flex 布局 */ .code-block-content { position: relative; display: flex; background-color: transparent; } /* 行号容器 - 固定宽度和位置 */ .line-numbers-container { flex: 0 0 2.5rem; background-color: #f1f5f9; border-right: 1px solid #e2e8f0; z-index: 1; position: sticky; left: 0; display: flex; flex-direction: column; align-items: center; padding: 0.15rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* 行号元素样式 */ .line-number { width: 100%; height: 1.4rem; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 0.85rem; user-select: none; } /* 代码内容容器 - 允许水平滚动 */ .code-content-container { flex: 1; overflow-x: auto; } /* 基础代码块样式 - 减小内边距 */ pre { margin: 0; padding: 0.15rem 0; overflow-x: visible; /* 改为 visible,滚动由父容器处理 */ } pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9rem; line-height: 1.4rem; padding: 0; display: block; } /* 行号样式 - 缩小间距 */ .line-numbers { counter-reset: line; position: relative; } /* 行样式 - 移除左侧 padding */ .line-numbers .line { position: relative; counter-increment: line; padding-left: 0.5rem; /* 减小左侧内边距 */ padding-right: 0.4rem; min-height: 1.4rem; white-space: pre; } /* 暗色模式 */ [data-theme='dark'] .code-block-container { border-color: #334155; background-color: transparent; } [data-theme='dark'] .code-block-header { background-color: #1e293b; border-bottom-color: #334155; } [data-theme='dark'] .code-block-lang { color: #e2e8f0; } [data-theme='dark'] .code-block-copy { color: #e2e8f0; } [data-theme='dark'] .code-block-copy:hover { background-color: #334155; } /* 移除代码内容区域的黑暗模式背景 */ [data-theme='dark'] .code-block-content { background-color: transparent; } /* 暗色模式行号容器样式 */ [data-theme='dark'] .line-numbers-container { background-color: #1e293b; border-right-color: #334155; } /* 暗色模式行号样式 */ [data-theme='dark'] .line-number { color: #64748b; } /* 确保所有代码元素没有背景 */ code, pre, .code-block-content, .code-block-content pre.shiki, .code-block-content pre.astro-code, .code-block-content pre code, .code-block-content pre code span, pre.shiki, pre.astro-code, .line, .line span { background-color: transparent !important; } /* 高亮行样式 - 仅保留边框而不添加背景 */ .line.highlighted { border-left: 2px solid #eab308; } [data-theme='dark'] .line.highlighted { border-left: 2px solid #fbbf24; background-color: transparent !important; } /* 暗黑主题样式 */ [data-theme='dark'] .astro-code { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; } [data-theme='dark'] .astro-code span { color: var(--shiki-dark) !important; } /* 行内代码块样式 */ :not(pre) > code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.875rem; color: var(--color-primary-700); margin: 0 0.2rem; border-radius: 0.3rem; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; max-width: 100%; display: inline-block; vertical-align: middle; line-height: 1.4; } /* 行内代码块黑暗模式样式 */ [data-theme='dark'] :not(pre) > code { color: var(--color-primary-300); } /* 长路径的行内代码块样式特殊处理 */ :not(pre) > code:has(path), :not(pre) > code.file-path { white-space: pre-wrap; /* 保留空格但允许换行 */ overflow-wrap: break-word; /* 允许在任何地方断行 */ word-break: break-all; /* 允许在任何字符间断行 */ max-width: 100%; display: inline-block; font-size: 0.85rem; /* 略微减小字体尺寸 */ padding: 0.2rem 0.4rem; line-height: 1.4; } /* 针对文件路径的特殊样式 - 适用于Windows路径 */ :not(pre) > code.file-path { color: var(--color-gray-700); } /* 针对文件路径的特殊样式 - 黑暗模式 */ [data-theme='dark'] :not(pre) > code.file-path { color: var(--color-gray-300); }