v1.4.6 代码块高亮最终方案 - Shiki 后端预高亮

- 添加 shiki 依赖，启动时初始化 103 种语言高亮
- 实现三路语法高亮选择逻辑：
1. codeTheme 有值 → Shiki 预高亮（新插件）
2. codeTheme 为空 + HTML 含 highlight.js CDN → legacy 路径（旧插件）
3. codeTheme 为空 + 无 CDN → Shiki 默认 github-light（兜底）
- 支持三种 codeTheme 映射：
github→github-light, monokai→monokai, oneDark→one-dark-pro
- 向后兼容：旧版本插件不受影响

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -5,9 +5,10 @@
   "description": "Puppeteer PDF Generator for Hugging Face Spaces",
   "main": "server.js",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.18.2",
     "puppeteer": "^22.0.0",
-    "cors": "^2.8.5"
+    "shiki": "^1.24.0"
   },
   "scripts": {
     "start": "node server.js"

server.js

@@ -25,6 +25,84 @@
 const express = require('express');
 const puppeteer = require('puppeteer');
 const cors = require('cors');
+const { getHighlighter } = require('shiki');
+
+// ─── Shiki Highlighter Initialization ─────────────────
+// Maps frontend codeTheme settings to Shiki theme names
+const THEME_MAP = {
+  'github': 'github-light',
+  'monokai': 'monokai',
+  'oneDark': 'one-dark-pro',
+};
+
+let shikiHighlighter = null;
+
+async function initShiki() {
+  try {
+    console.log('[Shiki] Initializing highlighter with bundled languages...');
+    shikiHighlighter = await getHighlighter({
+      themes: ['github-light', 'monokai', 'one-dark-pro'],
+      langs: [
+        // Core languages (all included in shiki default bundle)
+        'javascript', 'typescript', 'python', 'java', 'c', 'cpp', 'csharp',
+        'go', 'rust', 'ruby', 'php', 'swift', 'kotlin', 'sql', 'bash',
+        'shell', 'yaml', 'json', 'html', 'xml', 'css', 'scss', 'less',
+        'markdown', 'diff', 'dockerfile', 'lua', 'r', 'dart', 'scala',
+        // Additional languages
+        'perl', 'haskell', 'erlang', 'elixir', 'clojure', 'groovy',
+        'objective-c', 'asm', 'powershell', 'makefile', 'cmake',
+        'protobuf', 'graphql', 'toml', 'ini', 'git-rebase',
+        // Rare languages (verified in shiki default bundle)
+        'abap', 'cobol', 'pascal', 'racket', 'latex', 'tex',
+        'viml', 'nginx', 'apache', 'vue', 'svelte', 'zig',
+        'matlab', 'julia', 'astro',
+      ],
+    });
+    const langs = shikiHighlighter.getLoadedLanguages();
+    console.log(`[Shiki] Highlighter ready with ${langs.length} languages: ${langs.slice(0, 20).join(', ')}...`);
+  } catch (e) {
+    console.error('[Shiki] Failed to initialize:', e.message);
+    shikiHighlighter = null;
+  }
+}
+
+// Pre-highlight code blocks in HTML using Shiki (inline styles)
+function highlightHtmlWithShiki(html, themeName = 'github-light') {
+  if (!shikiHighlighter) return html;
+
+  const shikiTheme = THEME_MAP[themeName] || 'github-light';
+
+  return html.replace(/<pre([^>]*)><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (match, preAttrs, codeText) => {
+    // Skip if already has syntax spans (Shiki-style or hljs-style)
+    if (/<span/i.test(codeText)) return match;
+
+    // Extract language from class or data attribute
+    let lang = '';
+    const classMatch = preAttrs.match(/class="[^"]*language-(\w+)/i)
+      || preAttrs.match(/data-language="(\w+)"/i);
+    if (classMatch) lang = classMatch[1].toLowerCase();
+
+    // Try Shiki highlight
+    if (lang && shikiHighlighter.getLoadedLanguages().includes(lang)) {
+      try {
+        const highlighted = shikiHighlighter.codeToHtml(codeText
+          .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"'),
+          { lang, theme: shikiTheme }
+        );
+        return highlighted;
+      } catch (e) {
+        // Fallback to plain pre
+      }
+    }
+
+    return match;
+  });
+}
+
+// Start Shiki initialization (non-blocking)
+initShiki().then(() => {
+  console.log('[Shiki] Startup initialization complete.');
+}).catch(() => {});
 
 const app = express();
 const port = process.env.PORT || 7860;
@@ -61,11 +139,30 @@ app.post('/api/generate_pdf', async (req, res) => {
   let browser = null;
 
   try {
-    const { html, showWatermark, imageCount, totalImageSizeMB } = req.body;
+    const { html, showWatermark, imageCount, totalImageSizeMB, codeTheme } = req.body;
     if (!html) {
       return res.status(400).json({ error: 'Missing html content' });
     }
 
+    // ─── Syntax Highlighting Path Selection ───
+    // Priority: codeTheme param > HTML detection > Shiki default
+    // 1. If codeTheme is sent (new plugin) → always use Shiki
+    // 2. If no codeTheme → check for highlight.js script in HTML
+    //    - Found → legacy highlight.js path (old plugin)
+    //    - Not found → Shiki default (no highlighting in HTML)
+    const hasHighlightJsScript = html.includes('highlight.min.js') || html.includes('highlight.full.min.js') || html.includes('hljs.highlightAll');
+    let htmlToProcess = html;
+
+    if (codeTheme) {
+      console.log(`[PDF-GEN] [${getElapsed()}] codeTheme provided (${codeTheme}), using Shiki`);
+      htmlToProcess = highlightHtmlWithShiki(html, codeTheme);
+    } else if (hasHighlightJsScript && shikiHighlighter) {
+      console.log(`[PDF-GEN] [${getElapsed()}] No codeTheme, detected highlight.js in HTML, using legacy path`);
+    } else if (shikiHighlighter) {
+      console.log(`[PDF-GEN] [${getElapsed()}] No codeTheme, no highlight.js, using Shiki default`);
+      htmlToProcess = highlightHtmlWithShiki(html, 'github');
+    }
+
     const brandText = showWatermark !== false ? 'Powered by XWX AI Chat Exporter' : '';
     const htmlSizeMB = (html.length / 1024 / 1024).toFixed(2);
     const imgCount = imageCount || 0;
@@ -76,11 +173,11 @@ app.post('/api/generate_pdf', async (req, res) => {
     // 关键修复：移除所有图片的 loading="lazy" 属性
     // 问题：loading="lazy" 导致视口外的图片在 PDF 中不渲染
     // 解决方案：https://stackoverflow.com/questions/79156691/puppeteersharp-fails-to-display-base64-encoded-images-in-pdf-output
-    const htmlWithoutLazy = html.replace(/loading=["']lazy["']/gi, '');
+    htmlToProcess = htmlToProcess.replace(/loading=["']lazy["']/gi, '');
     console.log(`[PDF-GEN] [${getElapsed()}] 已移除 loading="lazy" 属性`);
-    
-    // 使用移除 lazy 后的 HTML
-    const htmlToUse = htmlWithoutLazy;
+
+    // 使用处理后的 HTML
+    const htmlToUse = htmlToProcess;
     
     const baseWaitTime = imgCount > 0 ? Math.min(500 + imgCount * 400, 6000) : 500;
     const sizeWaitTime = imgSizeMB > 0 ? Math.min(imgSizeMB * 100, 3000) : 0;
@@ -128,7 +225,7 @@ app.post('/api/generate_pdf', async (req, res) => {
     // 设置 viewport 满足大部分页面渲染需求
     await page.setViewport({ width: 1200, height: 800 });
     console.log(`[PDF-GEN] [${getElapsed()}] Viewport: 1200x800`);
-    
+
     console.log(`[PDF-GEN] [${getElapsed()}] 正在填充页面内容...`);
     await page.setContent(htmlToUse, {
       waitUntil: ['load', 'networkidle0'],