Skip to content

Add GitHub-style alert/admonition rendering for NOTE/TIP/IMPORTANT/WARNING/CAUTION #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThisIs-Developer merged 9 commits into from
Mar 25, 2026
Merged

Add GitHub-style alert/admonition rendering for NOTE/TIP/IMPORTANT/WARNING/CAUTION #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
eecfffb
Initial plan
Copilot Mar 25, 2026
74eae5a
Add GitHub-style admonition parsing and styling
Copilot Mar 25, 2026
7090d87
Handle same-line GitHub alert markers robustly
Copilot Mar 25, 2026
433bbba
Polish admonition marker parsing readability
Copilot Mar 25, 2026
0aa30d8
Match GitHub-style alert title icons and colors
Copilot Mar 25, 2026
7093e32
Harden alert icon rendering and fix note icon path
Copilot Mar 25, 2026
a89d5f4
Use GitHub octicons for alert icons
Copilot Mar 25, 2026
ffd9143
Switch markdown alert icons to Font Awesome paths
Copilot Mar 25, 2026
60981e9
Adjust alert icon fallback viewBox for Font Awesome
Copilot Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
126 changes: 125 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,90 @@ document.addEventListener("DOMContentLoaded", function () {
renderer: renderer,
});

const GITHUB_ALERT_META = {
note: {
label: "Note",
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",
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",
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",
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",
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;

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 firstParagraphHtml = firstParagraph.innerHTML.trim();
const markerMatch = firstParagraphHtml.match(GITHUB_ALERT_MARKER_REGEX);
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";
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 512 512");
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);

const remainingHtml = firstParagraphHtml
.replace(GITHUB_ALERT_MARKER_REGEX, "")
.trim();
if (remainingHtml) {
firstParagraph.innerHTML = remainingHtml;
} else {
firstParagraph.remove();
}
});
}

const sampleMarkdown = `# Welcome to Markdown Viewer

## ✨ Key Features
Expand Down Expand Up @@ -776,6 +860,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);

Expand Down Expand Up @@ -1729,6 +1814,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
Expand Down Expand Up @@ -1772,6 +1861,40 @@ 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;
border-radius: 0.375rem;
}
.markdown-alert > :last-child {
margin-bottom: 0;
}
.markdown-alert-title {
margin: 0 0 8px;
font-weight: 600;
line-height: 1.25;
display: flex;
align-items: center;
gap: 8px;
}
.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 {
padding: 15px;
Expand All @@ -1781,7 +1904,7 @@ This is a fully client-side application. Your content never leaves your browser
</head>
<body>
<article class="markdown-body">
${sanitizedHtml}
${enhancedHtml}
</article>
</body>
</html>`;
Expand Down Expand Up @@ -2294,6 +2417,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";
Expand Down
96 changes: 96 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,102 @@ body {
padding: 0.2em 0.4em;
}

.markdown-body .markdown-alert {
padding: 0.5rem 1rem;
margin-bottom: 16px;
border-left: 0.25em solid;
border-radius: 0.375rem;
}

.markdown-body .markdown-alert > :last-child {
margin-bottom: 0;
}

.markdown-body .markdown-alert-title {
margin: 0 0 8px;
font-weight: 600;
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 {
color: #0969da;
border-left-color: #0969da;
background-color: #ddf4ff;
}

.markdown-body .markdown-alert-tip {
color: #1a7f37;
border-left-color: #1a7f37;
background-color: #dafbe1;
}

.markdown-body .markdown-alert-important {
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 {
display: flex;
gap: 8px;
Expand Down
Loading