XWX-AI Claude Opus 4.6 commited on
Commit
f8322a5
·
1 Parent(s): e14f86d

fix: restore data-language attribute in Shiki-highlighted code blocks

Browse files

Shiki's codeToHtml() does not preserve the data-language attribute
from the original <pre> tag. The CSS language label depends on
pre[data-language]::before { content: attr(data-language); },
so the label disappears after Shiki highlighting.

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

Files changed (1) hide show
  1. server.js +5 -3
server.js CHANGED
@@ -85,10 +85,12 @@ function highlightHtmlWithShiki(html, themeName = 'github-light') {
85
  // Try Shiki highlight
86
  if (lang && shikiHighlighter.getLoadedLanguages().includes(lang)) {
87
  try {
88
- const highlighted = shikiHighlighter.codeToHtml(codeText
89
  .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"'),
90
  { lang, theme: shikiTheme }
91
  );
 
 
92
  return highlighted;
93
  } catch (e) {
94
  // Fallback to plain pre
@@ -167,9 +169,9 @@ app.post('/api/generate_pdf', async (req, res) => {
167
  const htmlSizeMB = (html.length / 1024 / 1024).toFixed(2);
168
  const imgCount = imageCount || 0;
169
  const imgSizeMB = totalImageSizeMB || 0;
170
-
171
  console.log(`[PDF-GEN] [${getElapsed()}] 解析请求完成: HTML ${htmlSizeMB} MB, 图片 ${imgCount} 张 (${imgSizeMB} MB)`);
172
-
173
  // 关键修复:移除所有图片的 loading="lazy" 属性
174
  // 问题:loading="lazy" 导致视口外的图片在 PDF 中不渲染
175
  // 解决方案:https://stackoverflow.com/questions/79156691/puppeteersharp-fails-to-display-base64-encoded-images-in-pdf-output
 
85
  // Try Shiki highlight
86
  if (lang && shikiHighlighter.getLoadedLanguages().includes(lang)) {
87
  try {
88
+ let highlighted = shikiHighlighter.codeToHtml(codeText
89
  .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"'),
90
  { lang, theme: shikiTheme }
91
  );
92
+ // Restore data-language attribute for CSS language label display
93
+ highlighted = highlighted.replace(/<pre\s/, `<pre data-language="${lang}" `);
94
  return highlighted;
95
  } catch (e) {
96
  // Fallback to plain pre
 
169
  const htmlSizeMB = (html.length / 1024 / 1024).toFixed(2);
170
  const imgCount = imageCount || 0;
171
  const imgSizeMB = totalImageSizeMB || 0;
172
+
173
  console.log(`[PDF-GEN] [${getElapsed()}] 解析请求完成: HTML ${htmlSizeMB} MB, 图片 ${imgCount} 张 (${imgSizeMB} MB)`);
174
+
175
  // 关键修复:移除所有图片的 loading="lazy" 属性
176
  // 问题:loading="lazy" 导致视口外的图片在 PDF 中不渲染
177
  // 解决方案:https://stackoverflow.com/questions/79156691/puppeteersharp-fails-to-display-base64-encoded-images-in-pdf-output