diff --git a/src/app.css b/src/app.css
index 8f37ef6..67fe57e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,4 @@
+@import "highlight.js/styles/github.css";
:root {
--bg-color: #ffffff;
@@ -601,6 +602,19 @@ body.single-col .post-list {
color: inherit;
display: flex;
align-items: center;
+ justify-content: center;
+ line-height: 1;
+}
+
+.code-header-actions button span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 1;
+}
+
+.code-header-actions svg {
+ display: block;
}
/* 操作按钮：默认隐藏，展开时显示 */
diff --git a/src/lib/components/MarkdownRenderer.svelte b/src/lib/components/MarkdownRenderer.svelte
index 3e4aa49..b225417 100644
--- a/src/lib/components/MarkdownRenderer.svelte
+++ b/src/lib/components/MarkdownRenderer.svelte
@@ -15,16 +15,40 @@
renderer: {
code(token) {
const code = token.text;
- const lang = (token.lang || '').split(' ')[0];
- const language = hljs.getLanguage(lang) ? lang : 'plaintext';
- const highlighted = hljs.highlight(code, { language }).value;
- const title = lang || 'text';
+ const rawLang = (token.lang || '').trim().toLowerCase().split(' ')[0];
+ let highlighted: string;
+ let language = 'plaintext';
+
+ if (rawLang && hljs.getLanguage(rawLang)) {
+ language = rawLang;
+ highlighted = hljs.highlight(code, { language }).value;
+ } else {
+ try {
+ const auto = hljs.highlightAuto(code);
+ highlighted = auto.value || code;
+ if (auto.language) language = auto.language;
+ } catch {
+ highlighted = code;
+ }
+ }
+ const title = rawLang || language || 'text';
const encodedCode = encodeURIComponent(code);
- const wrappedLines = highlighted
- .split('\n')
- .map((line) => `${line}`)
- .join('\n');
+ const lines = highlighted.split('\n');
+ const openSpans: string[] = [];
+ const wrappedLines = lines.map((line) => {
+ const prefix = openSpans.join('');
+ const matches = line.matchAll(/]+>|<\/span>/g);
+ for (const m of matches) {
+ if (m[0] === '') {
+ openSpans.pop();
+ } else {
+ openSpans.push(m[0]);
+ }
+ }
+ const suffix = ''.repeat(openSpans.length);
+ return `${prefix}${line}${suffix}`;
+ }).join('\n');
const chevronRight = '';
const listOlIcon = '';
@@ -43,8 +67,8 @@
${ellipsisIcon}
@@ -174,9 +198,9 @@
if (codeEl) {
navigator.clipboard.writeText(codeEl.textContent || '');
if (copyIconEl) copyIconEl.style.display = 'none';
- if (checkIconEl) checkIconEl.style.display = 'block';
+ if (checkIconEl) checkIconEl.style.display = 'flex';
setTimeout(() => {
- if (copyIconEl) copyIconEl.style.display = 'block';
+ if (copyIconEl) copyIconEl.style.display = 'flex';
if (checkIconEl) checkIconEl.style.display = 'none';
}, 3000);
}