From e7deaabd7f48c2003cbb7a56e2737a4e716c9042 Mon Sep 17 00:00:00 2001 From: Copilot <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Apr 2026 23:21:02 +0800 Subject: [PATCH] Render YAML frontmatter as syntax-highlighted code block in Markdown preview (#1923) * Initial plan * Enhance Markdown preview to render YAML frontmatter as syntax-highlighted code block Agent-Logs-Url: https://github.com/QL-Win/QuickLook/sessions/3a5a5820-a319-470c-8b1e-d26ced795a81 Co-authored-by: emako <24737061+emako@users.noreply.github.com> * Improve frontmatter rendering: add BOM handling and fix spacing after code fence Agent-Logs-Url: https://github.com/QL-Win/QuickLook/sessions/09223e04-d9b1-40f5-9015-3249a227246c Co-authored-by: emako <24737061+emako@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: emako <24737061+emako@users.noreply.github.com> --- .../Resources/md2html.html | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/QuickLook.Plugin/QuickLook.Plugin.MarkdownViewer/Resources/md2html.html b/QuickLook.Plugin/QuickLook.Plugin.MarkdownViewer/Resources/md2html.html index 8a5cb02..de9bbde 100644 --- a/QuickLook.Plugin/QuickLook.Plugin.MarkdownViewer/Resources/md2html.html +++ b/QuickLook.Plugin/QuickLook.Plugin.MarkdownViewer/Resources/md2html.html @@ -245,8 +245,35 @@ .replace(/\s+/g, "-") .replace(/-+/g, "-"), }); + // Feature toggle: convert YAML front matter to a ```yaml``` code fence before rendering + const ENABLE_FRONTMATTER_RENDERING = true; + + function processFrontmatter(content) { + if (!ENABLE_FRONTMATTER_RENDERING) return content; + // Match a YAML front matter block at the very start of the document: + // - starts with --- (optionally followed by spaces) then a newline + // - followed by any content (non-greedy, stops at the first closing --- line) + // - closed by --- (optionally followed by spaces) on its own line + const frontmatterRegex = /^---[ \t]*\r?\n([\s\S]*?)\r?\n---[ \t]*(\r?\n|$)/; + const match = content.match(frontmatterRegex); + if (match) { + // Preserve the document's original line ending style + const eol = match[0].includes('\r\n') ? '\r\n' : '\n'; + // Trim any leading blank lines from the remainder so we don't accumulate + // extra whitespace on top of the blank line the code fence already ends with + const rest = content.slice(match[0].length).replace(/^(\r?\n)+/, ''); + const yamlBlock = "```yaml" + eol + match[1] + eol + "```" + eol + (rest ? eol : ''); + return yamlBlock + rest; + } + return content; + } + + // Read raw content; strip UTF-8 BOM (U+FEFF) if the file was encoded with one + let rawContent = document.getElementById("text-input").value; + if (rawContent.charCodeAt(0) === 0xFEFF) rawContent = rawContent.slice(1); + document.getElementById("preview").innerHTML = md.render( - document.getElementById("text-input").value + processFrontmatter(rawContent) ); // Initialize Mermaid after markdown rendering