From eecfffb480290cfdd0a0ecc1b50a8f55d5a096fb Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 07:22:11 +0000 Subject: [PATCH 1/9] Initial plan From 74eae5acad02ebbcef766ce912dd1bf682be5805 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 07:28:24 +0000 Subject: [PATCH 2/9] Add GitHub-style admonition parsing and styling Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/f710fab7-1abb-4b80-9730-df6d03e47289 --- README.md | 1 + script.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++- styles.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 127 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8008159..a25127e 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,7 @@ Inside the **zoom modal** you can: - Tables - Code blocks with syntax highlighting - Blockquotes +- GitHub-style alerts/admonitions (`[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, `[!CAUTION]`) - Horizontal rules - Task lists - LaTeX equations (inline and block) diff --git a/script.js b/script.js index 97ad3d4..37e5817 100644 --- a/script.js +++ b/script.js @@ -136,6 +136,45 @@ document.addEventListener("DOMContentLoaded", function () { renderer: renderer, }); + const GITHUB_ALERT_TYPES = { + note: "Note", + tip: "Tip", + important: "Important", + warning: "Warning", + caution: "Caution", + }; + + function enhanceGitHubAlerts(container) { + if (!container) return; + + const blockquotes = container.querySelectorAll("blockquote"); + blockquotes.forEach((blockquote) => { + let firstParagraph = null; + for (const child of blockquote.children) { + if (child.tagName === "P") { + firstParagraph = child; + break; + } + } + if (!firstParagraph) return; + + const markerMatch = firstParagraph.textContent + .trim() + .match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]$/i); + if (!markerMatch) return; + + const alertType = markerMatch[1].toLowerCase(); + blockquote.classList.add("markdown-alert", `markdown-alert-${alertType}`); + + const title = document.createElement("p"); + title.className = "markdown-alert-title"; + title.textContent = GITHUB_ALERT_TYPES[alertType] || markerMatch[1]; + + firstParagraph.remove(); + blockquote.insertBefore(title, blockquote.firstChild); + }); + } + const sampleMarkdown = `# Welcome to Markdown Viewer ## ✨ Key Features @@ -776,6 +815,7 @@ This is a fully client-side application. Your content never leaves your browser ADD_ATTR: ['id', 'class', 'style'] }); markdownPreview.innerHTML = sanitizedHtml; + enhanceGitHubAlerts(markdownPreview); processEmojis(markdownPreview); @@ -1729,6 +1769,10 @@ This is a fully client-side application. Your content never leaves your browser ADD_TAGS: ['mjx-container'], ADD_ATTR: ['id', 'class', 'style'] }); + const tempContainer = document.createElement("div"); + tempContainer.innerHTML = sanitizedHtml; + enhanceGitHubAlerts(tempContainer); + const enhancedHtml = tempContainer.innerHTML; const isDarkTheme = document.documentElement.getAttribute("data-theme") === "dark"; const cssTheme = isDarkTheme @@ -1772,6 +1816,25 @@ This is a fully client-side application. Your content never leaves your browser .hljs-addition { color: ${isDarkTheme ? "#aff5b4" : "#22863a"}; background-color: ${isDarkTheme ? "#033a16" : "#f0fff4"}; } .hljs-deletion { color: ${isDarkTheme ? "#ffdcd7" : "#b31d28"}; background-color: ${isDarkTheme ? "#67060c" : "#ffeef0"}; } + .markdown-alert { + padding: 0.5rem 1rem; + margin-bottom: 16px; + border-left: 0.25em solid; + } + .markdown-alert > :last-child { + margin-bottom: 0; + } + .markdown-alert-title { + margin: 0 0 8px; + font-weight: 600; + line-height: 1; + } + .markdown-alert-note { border-left-color: #1f6feb; background-color: ${isDarkTheme ? "rgba(31, 111, 235, 0.15)" : "#ddf4ff"}; } + .markdown-alert-tip { border-left-color: #238636; background-color: ${isDarkTheme ? "rgba(35, 134, 54, 0.15)" : "#dafbe1"}; } + .markdown-alert-important { border-left-color: #8957e5; background-color: ${isDarkTheme ? "rgba(137, 87, 229, 0.15)" : "#fbefff"}; } + .markdown-alert-warning { border-left-color: #9a6700; background-color: ${isDarkTheme ? "rgba(210, 153, 34, 0.18)" : "#fff8c5"}; } + .markdown-alert-caution { border-left-color: #cf222e; background-color: ${isDarkTheme ? "rgba(248, 81, 73, 0.18)" : "#ffebe9"}; } + @media (max-width: 767px) { .markdown-body { padding: 15px; @@ -1781,7 +1844,7 @@ This is a fully client-side application. Your content never leaves your browser
- ${sanitizedHtml} + ${enhancedHtml}
`; @@ -2294,6 +2357,7 @@ This is a fully client-side application. Your content never leaves your browser const tempElement = document.createElement("div"); tempElement.className = "markdown-body pdf-export"; tempElement.innerHTML = sanitizedHtml; + enhanceGitHubAlerts(tempElement); tempElement.style.padding = "20px"; tempElement.style.width = "210mm"; tempElement.style.margin = "0 auto"; diff --git a/styles.css b/styles.css index 363c234..fdab44b 100644 --- a/styles.css +++ b/styles.css @@ -175,6 +175,67 @@ body { padding: 0.2em 0.4em; } +.markdown-body .markdown-alert { + padding: 0.5rem 1rem; + margin-bottom: 16px; + border-left: 0.25em solid; +} + +.markdown-body .markdown-alert > :last-child { + margin-bottom: 0; +} + +.markdown-body .markdown-alert-title { + margin: 0 0 8px; + font-weight: 600; + line-height: 1; +} + +.markdown-body .markdown-alert-note { + border-left-color: #1f6feb; + background-color: #ddf4ff; +} + +.markdown-body .markdown-alert-tip { + border-left-color: #238636; + background-color: #dafbe1; +} + +.markdown-body .markdown-alert-important { + border-left-color: #8957e5; + background-color: #fbefff; +} + +.markdown-body .markdown-alert-warning { + border-left-color: #9a6700; + background-color: #fff8c5; +} + +.markdown-body .markdown-alert-caution { + border-left-color: #cf222e; + background-color: #ffebe9; +} + +[data-theme="dark"] .markdown-body .markdown-alert-note { + background-color: rgba(31, 111, 235, 0.15); +} + +[data-theme="dark"] .markdown-body .markdown-alert-tip { + background-color: rgba(35, 134, 54, 0.15); +} + +[data-theme="dark"] .markdown-body .markdown-alert-important { + background-color: rgba(137, 87, 229, 0.15); +} + +[data-theme="dark"] .markdown-body .markdown-alert-warning { + background-color: rgba(210, 153, 34, 0.18); +} + +[data-theme="dark"] .markdown-body .markdown-alert-caution { + background-color: rgba(248, 81, 73, 0.18); +} + .toolbar { display: flex; gap: 8px; From 7090d872f0a753e6115b5b9adcd0110cb1f64659 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 07:30:16 +0000 Subject: [PATCH 3/9] Handle same-line GitHub alert markers robustly Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/f710fab7-1abb-4b80-9730-df6d03e47289 --- script.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 37e5817..a55af93 100644 --- a/script.js +++ b/script.js @@ -143,6 +143,7 @@ document.addEventListener("DOMContentLoaded", function () { warning: "Warning", caution: "Caution", }; + const GITHUB_ALERT_MARKER_REGEX = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\](?:\s+|$)/i; function enhanceGitHubAlerts(container) { if (!container) return; @@ -158,9 +159,9 @@ document.addEventListener("DOMContentLoaded", function () { } if (!firstParagraph) return; - const markerMatch = firstParagraph.textContent - .trim() - .match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]$/i); + const firstParagraphHtml = firstParagraph.innerHTML.trim(); + const markerMatch = firstParagraphHtml + .match(GITHUB_ALERT_MARKER_REGEX); if (!markerMatch) return; const alertType = markerMatch[1].toLowerCase(); @@ -170,8 +171,16 @@ document.addEventListener("DOMContentLoaded", function () { title.className = "markdown-alert-title"; title.textContent = GITHUB_ALERT_TYPES[alertType] || markerMatch[1]; - firstParagraph.remove(); blockquote.insertBefore(title, blockquote.firstChild); + + const remainingHtml = firstParagraphHtml + .replace(GITHUB_ALERT_MARKER_REGEX, "") + .trim(); + if (remainingHtml) { + firstParagraph.innerHTML = remainingHtml; + } else { + firstParagraph.remove(); + } }); } From 433bbbad55f2946b9f6e599b7d3c36b6fd5a7f28 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 07:30:57 +0000 Subject: [PATCH 4/9] Polish admonition marker parsing readability Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/f710fab7-1abb-4b80-9730-df6d03e47289 --- script.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/script.js b/script.js index a55af93..7bd603e 100644 --- a/script.js +++ b/script.js @@ -160,8 +160,7 @@ document.addEventListener("DOMContentLoaded", function () { if (!firstParagraph) return; const firstParagraphHtml = firstParagraph.innerHTML.trim(); - const markerMatch = firstParagraphHtml - .match(GITHUB_ALERT_MARKER_REGEX); + const markerMatch = firstParagraphHtml.match(GITHUB_ALERT_MARKER_REGEX); if (!markerMatch) return; const alertType = markerMatch[1].toLowerCase(); From 0aa30d8d0d401d82fbcf3deb52a6ecd35af28585 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 11:17:45 +0000 Subject: [PATCH 5/9] Match GitHub-style alert title icons and colors Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/84385004-bd3c-4cc3-b710-45a4fd6d69e2 --- script.js | 57 +++++++++++++++++++++++++++++++++++++++++------------- styles.css | 43 ++++++++++++++++++++++++++++++++++++---- 2 files changed, 83 insertions(+), 17 deletions(-) diff --git a/script.js b/script.js index 7bd603e..91369fa 100644 --- a/script.js +++ b/script.js @@ -136,12 +136,27 @@ document.addEventListener("DOMContentLoaded", function () { renderer: renderer, }); - const GITHUB_ALERT_TYPES = { - note: "Note", - tip: "Tip", - important: "Important", - warning: "Warning", - caution: "Caution", + const GITHUB_ALERT_META = { + note: { + label: "Note", + icon: '', + }, + tip: { + label: "Tip", + icon: '', + }, + important: { + label: "Important", + icon: '', + }, + warning: { + label: "Warning", + icon: '', + }, + caution: { + label: "Caution", + icon: '', + }, }; const GITHUB_ALERT_MARKER_REGEX = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\](?:\s+|$)/i; @@ -168,7 +183,8 @@ document.addEventListener("DOMContentLoaded", function () { const title = document.createElement("p"); title.className = "markdown-alert-title"; - title.textContent = GITHUB_ALERT_TYPES[alertType] || markerMatch[1]; + const alertMeta = GITHUB_ALERT_META[alertType] || { label: markerMatch[1], icon: "" }; + title.innerHTML = `${alertMeta.label}`; blockquote.insertBefore(title, blockquote.firstChild); @@ -1828,6 +1844,7 @@ This is a fully client-side application. Your content never leaves your browser padding: 0.5rem 1rem; margin-bottom: 16px; border-left: 0.25em solid; + border-radius: 0.375rem; } .markdown-alert > :last-child { margin-bottom: 0; @@ -1835,13 +1852,27 @@ This is a fully client-side application. Your content never leaves your browser .markdown-alert-title { margin: 0 0 8px; font-weight: 600; - line-height: 1; + line-height: 1.25; + display: flex; + align-items: center; + gap: 8px; } - .markdown-alert-note { border-left-color: #1f6feb; background-color: ${isDarkTheme ? "rgba(31, 111, 235, 0.15)" : "#ddf4ff"}; } - .markdown-alert-tip { border-left-color: #238636; background-color: ${isDarkTheme ? "rgba(35, 134, 54, 0.15)" : "#dafbe1"}; } - .markdown-alert-important { border-left-color: #8957e5; background-color: ${isDarkTheme ? "rgba(137, 87, 229, 0.15)" : "#fbefff"}; } - .markdown-alert-warning { border-left-color: #9a6700; background-color: ${isDarkTheme ? "rgba(210, 153, 34, 0.18)" : "#fff8c5"}; } - .markdown-alert-caution { border-left-color: #cf222e; background-color: ${isDarkTheme ? "rgba(248, 81, 73, 0.18)" : "#ffebe9"}; } + .markdown-alert-icon { + display: inline-flex; + width: 16px; + height: 16px; + } + .markdown-alert-icon svg { + width: 16px; + height: 16px; + fill: currentColor; + } + .markdown-alert-note { color: ${isDarkTheme ? "#4493f8" : "#0969da"}; border-left-color: ${isDarkTheme ? "#4493f8" : "#0969da"}; background-color: ${isDarkTheme ? "rgba(31, 111, 235, 0.15)" : "#ddf4ff"}; } + .markdown-alert-tip { color: ${isDarkTheme ? "#3fb950" : "#1a7f37"}; border-left-color: ${isDarkTheme ? "#3fb950" : "#1a7f37"}; background-color: ${isDarkTheme ? "rgba(35, 134, 54, 0.15)" : "#dafbe1"}; } + .markdown-alert-important { color: ${isDarkTheme ? "#ab7df8" : "#8250df"}; border-left-color: ${isDarkTheme ? "#ab7df8" : "#8250df"}; background-color: ${isDarkTheme ? "rgba(137, 87, 229, 0.15)" : "#fbefff"}; } + .markdown-alert-warning { color: ${isDarkTheme ? "#d29922" : "#9a6700"}; border-left-color: ${isDarkTheme ? "#d29922" : "#9a6700"}; background-color: ${isDarkTheme ? "rgba(210, 153, 34, 0.18)" : "#fff8c5"}; } + .markdown-alert-caution { color: ${isDarkTheme ? "#f85149" : "#cf222e"}; border-left-color: ${isDarkTheme ? "#f85149" : "#cf222e"}; background-color: ${isDarkTheme ? "rgba(248, 81, 73, 0.18)" : "#ffebe9"}; } + .markdown-alert > *:not(.markdown-alert-title) { color: ${isDarkTheme ? "#c9d1d9" : "#24292e"}; } @media (max-width: 767px) { .markdown-body { diff --git a/styles.css b/styles.css index fdab44b..258420e 100644 --- a/styles.css +++ b/styles.css @@ -179,6 +179,7 @@ body { padding: 0.5rem 1rem; margin-bottom: 16px; border-left: 0.25em solid; + border-radius: 0.375rem; } .markdown-body .markdown-alert > :last-child { @@ -188,52 +189,86 @@ body { .markdown-body .markdown-alert-title { margin: 0 0 8px; font-weight: 600; - line-height: 1; + line-height: 1.25; + display: flex; + align-items: center; + gap: 8px; +} + +.markdown-body .markdown-alert-icon { + display: inline-flex; + width: 16px; + height: 16px; +} + +.markdown-body .markdown-alert-icon svg { + width: 16px; + height: 16px; + fill: currentColor; } .markdown-body .markdown-alert-note { - border-left-color: #1f6feb; + color: #0969da; + border-left-color: #0969da; background-color: #ddf4ff; } .markdown-body .markdown-alert-tip { - border-left-color: #238636; + color: #1a7f37; + border-left-color: #1a7f37; background-color: #dafbe1; } .markdown-body .markdown-alert-important { - border-left-color: #8957e5; + color: #8250df; + border-left-color: #8250df; background-color: #fbefff; } .markdown-body .markdown-alert-warning { + color: #9a6700; border-left-color: #9a6700; background-color: #fff8c5; } .markdown-body .markdown-alert-caution { + color: #cf222e; border-left-color: #cf222e; background-color: #ffebe9; } +.markdown-body .markdown-alert > *:not(.markdown-alert-title) { + color: var(--preview-text-color); +} + [data-theme="dark"] .markdown-body .markdown-alert-note { + color: #4493f8; background-color: rgba(31, 111, 235, 0.15); + border-left-color: #4493f8; } [data-theme="dark"] .markdown-body .markdown-alert-tip { + color: #3fb950; background-color: rgba(35, 134, 54, 0.15); + border-left-color: #3fb950; } [data-theme="dark"] .markdown-body .markdown-alert-important { + color: #ab7df8; background-color: rgba(137, 87, 229, 0.15); + border-left-color: #ab7df8; } [data-theme="dark"] .markdown-body .markdown-alert-warning { + color: #d29922; background-color: rgba(210, 153, 34, 0.18); + border-left-color: #d29922; } [data-theme="dark"] .markdown-body .markdown-alert-caution { + color: #f85149; background-color: rgba(248, 81, 73, 0.18); + border-left-color: #f85149; } .toolbar { From 7093e325313a21d54c5f9989257c42d256976aaf Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 11:19:41 +0000 Subject: [PATCH 6/9] Harden alert icon rendering and fix note icon path Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/84385004-bd3c-4cc3-b710-45a4fd6d69e2 --- script.js | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/script.js b/script.js index 91369fa..465bad0 100644 --- a/script.js +++ b/script.js @@ -139,23 +139,23 @@ document.addEventListener("DOMContentLoaded", function () { const GITHUB_ALERT_META = { note: { label: "Note", - icon: '', + path: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-.75-10.75a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0v-3.5ZM8 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z", }, tip: { label: "Tip", - icon: '', + path: "M8 1a4.75 4.75 0 0 0-2.543 8.762.75.75 0 0 1 .343.637v.351c0 .564.302 1.084.79 1.364l.66.378V13a1 1 0 0 0 1 1h.5a1 1 0 0 0 1-1v-.508l.66-.378a1.572 1.572 0 0 0 .79-1.364V10.4a.75.75 0 0 1 .343-.638A4.75 4.75 0 0 0 8 1Zm-1.25 12h2.5v-.138l.915-.522a.572.572 0 0 0 .285-.495V11h-5v.845c0 .203.109.39.285.495l.915.522V13Z", }, important: { label: "Important", - icon: '', + path: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM7.25 4.75a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0v-3.5Zm.75 7.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z", }, warning: { label: "Warning", - icon: '', + path: "M6.457 1.047a1.75 1.75 0 0 1 3.086 0l6.082 11.81A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.143l6.082-11.81ZM8 4.75a.75.75 0 0 0-.75.75v3.25a.75.75 0 0 0 1.5 0V5.5A.75.75 0 0 0 8 4.75Zm0 7.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", }, caution: { label: "Caution", - icon: '', + path: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm2.47-10.53a.75.75 0 0 1 0 1.06L9.06 8l1.41 1.47a.75.75 0 1 1-1.08 1.04L8 9.08l-1.39 1.43a.75.75 0 0 1-1.08-1.04L6.94 8 5.53 6.53a.75.75 0 0 1 1.08-1.04L8 6.92l1.39-1.43a.75.75 0 0 1 1.08 0Z", }, }; const GITHUB_ALERT_MARKER_REGEX = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\](?:\s+|$)/i; @@ -183,8 +183,24 @@ document.addEventListener("DOMContentLoaded", function () { const title = document.createElement("p"); title.className = "markdown-alert-title"; - const alertMeta = GITHUB_ALERT_META[alertType] || { label: markerMatch[1], icon: "" }; - title.innerHTML = `${alertMeta.label}`; + const alertMeta = GITHUB_ALERT_META[alertType] || { label: markerMatch[1], path: "" }; + const icon = document.createElement("span"); + icon.className = "markdown-alert-icon"; + icon.setAttribute("aria-hidden", "true"); + + if (alertMeta.path) { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("viewBox", "0 0 16 16"); + const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute("d", alertMeta.path); + svg.appendChild(path); + icon.appendChild(svg); + } + + const label = document.createElement("span"); + label.textContent = alertMeta.label; + title.appendChild(icon); + title.appendChild(label); blockquote.insertBefore(title, blockquote.firstChild); From a89d5f414f11782ffaa2e24bcc61f973d4953a4e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 11:29:05 +0000 Subject: [PATCH 7/9] Use GitHub octicons for alert icons Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/83f65a4f-ae77-4dfd-89db-e665a971c32d --- script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 465bad0..712811e 100644 --- a/script.js +++ b/script.js @@ -139,7 +139,7 @@ document.addEventListener("DOMContentLoaded", function () { const GITHUB_ALERT_META = { note: { label: "Note", - path: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-.75-10.75a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0v-3.5ZM8 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z", + path: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z", }, tip: { label: "Tip", @@ -151,7 +151,7 @@ document.addEventListener("DOMContentLoaded", function () { }, warning: { label: "Warning", - path: "M6.457 1.047a1.75 1.75 0 0 1 3.086 0l6.082 11.81A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.143l6.082-11.81ZM8 4.75a.75.75 0 0 0-.75.75v3.25a.75.75 0 0 0 1.5 0V5.5A.75.75 0 0 0 8 4.75Zm0 7.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", + path: "M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z", }, caution: { label: "Caution", From ffd9143dd03d0977e88d928900859fb2fdb52a08 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 11:36:29 +0000 Subject: [PATCH 8/9] Switch markdown alert icons to Font Awesome paths Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/7a7f788a-ac86-476b-afbb-d2cd30792f53 --- script.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/script.js b/script.js index 712811e..bbbe37d 100644 --- a/script.js +++ b/script.js @@ -139,23 +139,28 @@ document.addEventListener("DOMContentLoaded", function () { const GITHUB_ALERT_META = { note: { label: "Note", - path: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z", + viewBox: "0 0 512 512", + path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z", }, tip: { label: "Tip", - path: "M8 1a4.75 4.75 0 0 0-2.543 8.762.75.75 0 0 1 .343.637v.351c0 .564.302 1.084.79 1.364l.66.378V13a1 1 0 0 0 1 1h.5a1 1 0 0 0 1-1v-.508l.66-.378a1.572 1.572 0 0 0 .79-1.364V10.4a.75.75 0 0 1 .343-.638A4.75 4.75 0 0 0 8 1Zm-1.25 12h2.5v-.138l.915-.522a.572.572 0 0 0 .285-.495V11h-5v.845c0 .203.109.39.285.495l.915.522V13Z", + viewBox: "0 0 384 512", + path: "M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7c0 0 0 0 0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5L109 384c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8c0 0 0 0 0 0s0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4c0 0 0 0 0 0s0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5l-48.6 0c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8c0 0 0 0 0 0s0 0 0 0s0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80l0-16 160 0 0 16c0 44.2-35.8 80-80 80z", }, important: { label: "Important", - path: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM7.25 4.75a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0v-3.5Zm.75 7.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z", + viewBox: "0 0 512 512", + path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z", }, warning: { label: "Warning", - path: "M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z", + viewBox: "0 0 512 512", + path: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z", }, caution: { label: "Caution", - path: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm2.47-10.53a.75.75 0 0 1 0 1.06L9.06 8l1.41 1.47a.75.75 0 1 1-1.08 1.04L8 9.08l-1.39 1.43a.75.75 0 0 1-1.08-1.04L6.94 8 5.53 6.53a.75.75 0 0 1 1.08-1.04L8 6.92l1.39-1.43a.75.75 0 0 1 1.08 0Z", + viewBox: "0 0 512 512", + path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z", }, }; const GITHUB_ALERT_MARKER_REGEX = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\](?:\s+|$)/i; @@ -183,14 +188,14 @@ document.addEventListener("DOMContentLoaded", function () { const title = document.createElement("p"); title.className = "markdown-alert-title"; - const alertMeta = GITHUB_ALERT_META[alertType] || { label: markerMatch[1], path: "" }; + const alertMeta = GITHUB_ALERT_META[alertType] || { label: markerMatch[1], path: "", viewBox: "0 0 16 16" }; const icon = document.createElement("span"); icon.className = "markdown-alert-icon"; icon.setAttribute("aria-hidden", "true"); if (alertMeta.path) { const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("viewBox", "0 0 16 16"); + svg.setAttribute("viewBox", alertMeta.viewBox || "0 0 16 16"); const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", alertMeta.path); svg.appendChild(path); From 60981e96242cfd9b3a4fc40ef89d02e661c182f5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 25 Mar 2026 11:37:52 +0000 Subject: [PATCH 9/9] Adjust alert icon fallback viewBox for Font Awesome Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/7a7f788a-ac86-476b-afbb-d2cd30792f53 --- script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index bbbe37d..308211b 100644 --- a/script.js +++ b/script.js @@ -188,14 +188,14 @@ document.addEventListener("DOMContentLoaded", function () { const title = document.createElement("p"); title.className = "markdown-alert-title"; - const alertMeta = GITHUB_ALERT_META[alertType] || { label: markerMatch[1], path: "", viewBox: "0 0 16 16" }; + const alertMeta = GITHUB_ALERT_META[alertType] || { label: markerMatch[1], path: "" }; const icon = document.createElement("span"); icon.className = "markdown-alert-icon"; icon.setAttribute("aria-hidden", "true"); if (alertMeta.path) { const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("viewBox", alertMeta.viewBox || "0 0 16 16"); + svg.setAttribute("viewBox", alertMeta.viewBox || "0 0 512 512"); const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", alertMeta.path); svg.appendChild(path);