Jerry/crystelf-plugin
1
0
Fork 0
mirror of https://github.com/Jerryplusy/crystelf-plugin.git synced 2025-12-05 15:41:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix:优化markdown截图

Browse Source
This commit is contained in:
Jerry 2025-10-22 21:45:49 +08:00
parent 75b6d1a348
commit 9487ffd184
1 changed files with 102 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
lib/ai/renderer.js
View File

@ -58,23 +58,27 @@ class Renderer {
async renderMarkdown(markdown) { async renderMarkdown(markdown) {
if (!this.isInitialized) await this.init(); if (!this.isInitialized) await this.init();
try { try {
const page = await this.browser.newPage(); const page = await this.browser.newPage();
const html = this.getMarkdownTemplate(markdown, this.config?.markdownRenderer || {}); const html = this.getMarkdownTemplate(markdown, this.config?.markdownRenderer || {});
await page.setContent(html, { waitUntil: 'networkidle0' }); await page.setContent(html, { waitUntil: 'networkidle0' });
await page.waitForSelector('#render-complete', { timeout: 5000 }); await page.waitForSelector('#render-complete', { timeout: 5000 });
//计算页面尺寸
const rect = await page.evaluate(() => { const rect = await page.evaluate(() => {
const body = document.body; const body = document.body;
return { width: body.scrollWidth, height: body.scrollHeight }; const main = document.querySelector('.markdown-body') || body;
}); const rect = main.getBoundingClientRect();
await page.setViewport({ return {
width: Math.ceil(rect.width), width: Math.min(Math.ceil(rect.width + 40), 1200),
height: Math.ceil(rect.height), height: Math.ceil(rect.height + 40),
};
}); });
await page.setViewport({
width: rect.width,
height: Math.min(rect.height, 3000),
deviceScaleFactor: 2,
});
const tempDir = path.join(process.cwd(), 'temp', 'html'); const tempDir = path.join(process.cwd(), 'temp', 'html');
if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true }); if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });
const filepath = path.join(tempDir, `markdown_${Date.now()}.png`); const filepath = path.join(tempDir, `markdown_${Date.now()}.png`);
@ -225,21 +229,92 @@ class Renderer {
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { background-color: ${themeColor}; color: #e2e8f0; font-family: 'Noto Sans SC', sans-serif; font-size: ${fontSize}px; line-height: 1.6; margin: 0; padding: 20px; } body {
h1, h2, h3, h4, h5, h6 { color: #f1f5f9; border-bottom: 1px solid #334155; padding-bottom: 5px; } background-color: ${themeColor};
a { color: #38bdf8; text-decoration: none; } color: #e2e8f0;
font-family: 'Noto Sans SC', sans-serif;
font-size: ${fontSize}px;
line-height: 1.6;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
.markdown-body {
width: 100%;
max-width: 900px;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
color: #f1f5f9;
border-bottom: 1px solid #334155;
padding-bottom: 5px;
margin-top: 1.5em;
}
a {
color: #38bdf8;
text-decoration: none;
}
a:hover { text-decoration: underline; } a:hover { text-decoration: underline; }
code { background-color: #1e293b; padding: 2px 5px; border-radius: 5px; }
pre { background-color: #1e293b; padding: 15px; border-radius: 10px; overflow-x: auto; } code {
blockquote { border-left: 4px solid #334155; padding-left: 15px; color: #9ca3af; } background-color: #1e293b;
padding: 2px 5px;
border-radius: 5px;
}
pre {
background-color: #1e293b;
padding: 15px;
border-radius: 10px;
overflow-x: auto;
}
blockquote {
border-left: 4px solid #334155;
padding-left: 15px;
color: #9ca3af;
margin: 1em 0;
}
table {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
background-color: #1e293b;
border-radius: 8px;
overflow: hidden;
}
th, td {
border: 1px solid #334155;
padding: 10px 12px;
text-align: left;
}
th {
background-color: #0f172a;
color: #f1f5f9;
}
tr:nth-child(even) {
background-color: #16213d;
}
img {
max-width: 100%;
border-radius: 10px;
display: block;
margin: 10px auto;
}
</style> </style>
</head> </head>
<body> <body>
<div class="markdown-body">
${md.render(markdown)} ${md.render(markdown)}
<div id="render-complete"></div> <div id="render-complete"></div>
</div>
</body> </body>
</html> </html>
`; `;