').replace(/\n/g, '
').replace(/(>[^<]+)|(^[^<]+)/g, (str) => str.replace(/\s/g, ' ')); + } else { + formatted = formatted.replace(/(>[^<]+)|(^[^<]+)/g, (str) => str.replace(/\s/g, ' ')); + } + return formatted; +} + +/** + * 高亮并格式化代码（与页面端 highlightAndFormatCode 一致） + * @param {string} text - 代码文本 + * @param {string} language - 语言 + * @param {boolean} showLineNumber - 是否显示行号 + * @returns {string} 高亮后的 HTML + */ +function highlightAndFormatCode(text, language, showLineNumber) { + let highlighted = ''; + const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'; + + if (showLineNumber) { + const rawLines = text.replace(/\r\n/g, '\n').split('\n'); + const highlightedLines = rawLines.map((lineRaw) => { + const lineHtml = hljs.highlight(lineRaw, { language: validLanguage }).value; + const formatted = formatHighlightedCode(lineHtml, false); + return formatted === '' ? ' ' : formatted; + }); + + const lineNumbersHtml = highlightedLines.map((_, idx) => `
'); + const codeLinesHtml = `
${codeInnerHtml}
`;
+ const lineNumberColumnStyles = 'text-align:right;padding:8px 0;border-right:1px solid rgba(0,0,0,0.04);user-select:none;background:var(--code-bg,transparent);';
+
+ highlighted = `
+
+ `;
+ } else {
+ const rawHighlighted = hljs.highlight(text, { language: validLanguage }).value;
+ highlighted = formatHighlightedCode(rawHighlighted, true);
+ }
+
+ return highlighted;
+}
+
+/**
+ * 生成带 CSS 类的内容（与页面端 styledContent 一致）
+ * @param {string} styleLabel - CSS 类名标识
+ * @param {string} content - 内容
+ * @param {string} [tagName] - HTML 标签名
+ * @returns {string} HTML 字符串
+ */
+function styledContent(styleLabel, content, tagName) {
+ const tag = tagName ?? styleLabel;
+ const className = `${styleLabel.replace(/_/g, '-')}`;
+ const headingAttr = /^h\d$/.test(tag) ? ' data-heading="true"' : '';
+ return `<${tag} class="${className}"${headingAttr}>${content}`;
+}
+
+/**
+ * 构建脚注数组 HTML
+ * @param {Array} footnotes - 脚注数组
+ * @returns {string} HTML 字符串
+ */
+function buildFootnoteArray(footnotes) {
+ return footnotes
+ .map(([index, title, link]) =>
+ link === title
+ ? `[${index}]: ${title}` + : `
[${index}] ${title}: ${link}` + ) + .join('\n'); +} + +/** + * 转换图注格式 + * @param {string} legend - 图注格式配置 + * @param {string|null} text - alt 文本 + * @param {string|null} title - title 文本 + * @returns {string} 图注文本 + */ +function transformLegend(legend, text, title) { + if (!legend || legend === 'none') return ''; + const options = legend.split('-'); + for (const option of options) { + if (option === 'alt' && text) return text; + if (option === 'title' && title) return title; + } + return ''; +} + +// ============================================================================ +// 主渲染函数 +// ============================================================================ + +/** + * 渲染 Markdown 为 HTML（与页面端逻辑对齐） + * @param {string} markdown - Markdown 内容 + * @param {object} options - 渲染选项 + * @returns {Promise<{html: string, readingTime: object}>} 渲染结果 + */ +export async function renderMarkdown(markdown, options = {}) { + const { + theme = 'default', + primaryColor = '#0F4C81', + fontFamily = "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif", + fontSize = '16px', + isMacCodeBlock = true, + isShowLineNumber = false, + legend = 'alt', + isCiteStatus = false, + isCountStatus = false, + isUseIndent = false, + isUseJustify = false, + highlightTheme = 'github', + themeMode = 'light' + } = options; + + // 1. Front-matter 解析 + const { attributes, body } = frontMatter(markdown); + const readingTimeResult = readingTime(body); + + // 2. 配置渲染器状态 + const footnotes = []; + let footnoteIndex = 0; + const listOrderedStack = []; + const listCounters = []; + + // 辅助函数：添加脚注 + function addFootnote(title, link) { + const existing = footnotes.find(([, , l]) => l === link); + if (existing) return existing[0]; + footnotes.push([++footnoteIndex, title, link]); + return footnoteIndex; + } + + // 3. 配置 marked 渲染器（与页面端 renderer-impl.ts 对齐） + const renderer = { + heading({ tokens, depth }) { + const text = this.parser.parseInline(tokens); + return styledContent(`h${depth}`, text); + }, + + paragraph({ tokens }) { + const text = this.parser.parseInline(tokens); + const isFigureImage = text.includes('
${highlighted}`;
+ return `${span}${code}`;
+ },
+
+ codespan({ text }) {
+ const escaped = escapeHtml(text);
+ return styledContent('codespan', escaped, 'code');
+ },
+
+ list({ ordered, items, start = 1 }) {
+ listOrderedStack.push(ordered);
+ listCounters.push(Number(start));
+ const html = items.map(item => this.listitem(item)).join('');
+ listOrderedStack.pop();
+ listCounters.pop();
+ return styledContent(ordered ? 'ol' : 'ul', html);
+ },
+
+ listitem(token) {
+ const ordered = listOrderedStack[listOrderedStack.length - 1];
+ const idx = listCounters[listCounters.length - 1]++;
+ const prefix = ordered ? `${idx}. ` : '• ';
+
+ let content;
+ try {
+ content = this.parser.parseInline(token.tokens);
+ } catch {
+ content = this.parser.parse(token.tokens).replace(/^++ `; + } + + // 6. 后处理：脚注 + let footnotesHtml = ''; + if (footnotes.length > 0) { + footnotesHtml = styledContent('h4', '引用链接') + styledContent('footnotes', buildFootnoteArray(footnotes), 'p'); + } + + // 7. 后处理：附加样式 + const additionStyle = ` + + `; + + const macSignStyle = ` + + `; + + const h2StrongStyle = ` + + `; + + // 8. 组装 HTML + const innerHtml = readingTimeHtml + htmlContent + footnotesHtml + additionStyle + macSignStyle + h2StrongStyle; + const wrappedHtml = styledContent('container', innerHtml, 'section'); + + // 9. 加载并处理 CSS + const themeCss = loadThemeCss(theme); + const highlightCss = loadHighlightCss(highlightTheme); + + // 生成 CSS 变量 + const variablesCss = generateCSSVariables({ + primaryColor, + fontFamily, + fontSize, + isUseIndent, + isUseJustify + }); + + // 合并 CSS + let combinedCss = [variablesCss, themeCss, highlightCss].filter(Boolean).join('\n'); + + // 使用 PostCSS 处理 CSS 变量 + combinedCss = await processCSS(combinedCss); + + // 后处理残留的 CSS 变量 + combinedCss = postProcessCss(combinedCss, { primaryColor, fontSize, fontFamily }); + + // 10. 构建最终 HTML + const baseHtml = ` +字数 ${readingTimeResult.words}，阅读大约需 ${Math.ceil(readingTimeResult.minutes)} 分钟
+
+
+ ${wrappedHtml}
+
+
+ `;
+
+ // 11. 使用 juice 内联样式
+ const inlinedHtml = juice.inlineContent(baseHtml, combinedCss, {
+ inlinePseudoElements: true,
+ preserveImportant: true,
+ resolveCSSVariables: false
+ });
+
+ return {
+ html: inlinedHtml,
+ readingTime: readingTimeResult
+ };
+}
diff --git a/packages/md-cli/server.js b/packages/md-cli/server.js
index 388561c70..d817ca6c6 100644
--- a/packages/md-cli/server.js
+++ b/packages/md-cli/server.js
@@ -2,6 +2,7 @@ import express from 'express'
import multer from 'multer'
import path from 'node:path'
import fs from 'node:fs'
+import os from 'node:os'
import { fileURLToPath } from 'node:url'
import { dirname } from 'node:path'
import { createProxyMiddleware } from 'http-proxy-middleware'
@@ -10,6 +11,7 @@ import {
parseArgv,
colors
} from './util.js'
+import { renderMarkdown } from './renderer.js'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
@@ -53,6 +55,126 @@ export function createServer(port = 8800) {
app.use('/public', express.static(path.join(__dirname, 'public')))
+ // 公共参数解析和渲染函数
+ async function parseAndRender(req) {
+ let {
+ markdown,
+ path: filePath,
+ title,
+ theme = 'default',
+ primaryColor = '#0F4C81',
+ fontFamily = "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif",
+ fontSize = '16px',
+ highlightTheme = 'github',
+ isMacCodeBlock = true,
+ isShowLineNumber = false,
+ legend = 'alt',
+ isCiteStatus = false,
+ isCountStatus = false,
+ isUseIndent = false,
+ isUseJustify = false,
+ themeMode = 'light'
+ } = req.body;
+
+ if (!markdown && filePath) {
+ if (fs.existsSync(filePath)) {
+ markdown = fs.readFileSync(filePath, 'utf-8');
+ } else {
+ throw new Error('File not found');
+ }
+ }
+
+ if (!markdown) {
+ throw new Error('Markdown content is required');
+ }
+
+ const result = await renderMarkdown(markdown, {
+ theme,
+ primaryColor,
+ fontFamily,
+ fontSize,
+ highlightTheme,
+ isMacCodeBlock,
+ isShowLineNumber,
+ legend,
+ isCiteStatus,
+ isCountStatus,
+ isUseIndent,
+ isUseJustify,
+ themeMode
+ });
+
+ return { ...result, filePath, title };
+ }
+
+ // API Route for Rendering Markdown
+ app.post('/api/render', async (req, res) => {
+ try {
+ const { html } = await parseAndRender(req);
+ res.json({ html });
+ } catch (error) {
+ console.error('Render error:', error);
+ if (error.message === 'File not found' || error.message === 'Markdown content is required') {
+ return res.status(400).json({ error: error.message });
+ }
+ res.status(500).json({ error: error.message });
+ }
+ });
+
+ // API Route for Rendering Markdown to HTML file (Preview)
+ app.post('/api/render/html', async (req, res) => {
+ try {
+ const { html, filePath, title } = await parseAndRender(req);
+
+ // 确定页面标题
+ let pageTitle = title || 'Markdown Render Preview';
+ if (!title && filePath) {
+ pageTitle = path.basename(filePath, path.extname(filePath));
+ }
+
+ // 封装成完整 HTML 页面
+ const fullHtml = `
+
+
+
+
+