diff --git a/package.json b/package.json
index cc233cd6..e4ca57ec 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"markdown-it-deflist": "^3.0.0",
"markdown-it-emoji": "^3.0.0",
"markdown-it-footnote": "^4.0.0",
+ "markdown-it-github-alerts": "^0.3.0",
"markdown-it-inject-linenumbers": "^0.3.0",
"markdown-it-mark": "^4.0.0",
"markdown-it-sub": "^2.0.0",
diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts
index 2b839abb..69ee1387 100644
--- a/src/parser/markdown.ts
+++ b/src/parser/markdown.ts
@@ -2,6 +2,7 @@ import MarkdownIt from 'markdown-it';
import anchor from 'markdown-it-anchor';
import highlight from './highlight.js';
import graphviz from './dot.js';
+import githubAlerts from 'markdown-it-github-alerts';
import config from './config.js';
import { Renderer } from './parser.js';
@@ -15,40 +16,40 @@ const mdit = new MarkdownIt({
// ts-expect-error for blocks so this is ugly:
// https://github.com/Microsoft/TypeScript/issues/19573
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import { full as emoji } from 'markdown-it-emoji';
mdit.use(emoji);
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import taskLists from 'markdown-it-task-lists';
mdit.use(taskLists);
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import footNote from 'markdown-it-footnote';
mdit.use(footNote);
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: most module not typed */
import lineNumbers from 'markdown-it-inject-linenumbers';
mdit.use(lineNumbers);
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import texMath from 'markdown-it-texmath';
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import katex from 'katex';
mdit.use(texMath, {
engine: katex,
delimiters: 'dollars',
katexOptions: config.katexOptions,
});
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import defList from 'markdown-it-deflist';
mdit.use(defList);
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import sub from 'markdown-it-sub';
mdit.use(sub);
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import sup from 'markdown-it-sup';
mdit.use(sup);
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import mark from 'markdown-it-mark';
mdit.use(mark);
-/* @ts-expect-error: markdown-it modules aren't typed */
+/* @ts-expect-error: module not typed */
import attributes from 'markdown-it-attrs';
mdit.use(attributes);
@@ -61,6 +62,7 @@ mdit.use(anchor, {
}),
});
mdit.use(graphviz);
+mdit.use(githubAlerts);
const renderMarkdown: Renderer = (content: string) => {
return mdit.render(content);
diff --git a/static/style.css b/static/style.css
index bee9dc94..1b05c4d1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,11 @@
+:root {
+ --color-alert-note: #a5d5fe;
+ --color-alert-tip: #b4fa72;
+ --color-alert-important: #ff8ffd;
+ --color-alert-warning: #ffaf00;
+ --color-alert-caution: #ff5f5f;
+}
+
html {
background-color: black;
color: #aaa;
@@ -122,7 +130,6 @@ section.footnotes {
/* --------------------------------------------------------------------------
* DEFIITION LISTS ---------------------------------------------------------- */
-
dl {
display: flex;
flex-flow: row wrap;
@@ -158,6 +165,68 @@ dt + dt + dd {
margin-top: -2.25em; /* Align definition with last term */
} /* Self height - margin - padding */
+/* --------------------------------------------------------------------------
+ * QUOTES AND ALERTS--------------------------------------------------------- */
+blockquote {
+ padding: 0 1rem;
+ color: #6a6a6a;
+ border-left: .25rem solid #353535;
+ margin-left: 0;
+}
+/* GitHub-style alerts */
+.markdown-alert {
+ padding: 0.5rem 1rem;
+ margin-bottom: 1rem;
+}
+.markdown-alert > :first-child {
+ margin-top: 0;
+}
+.markdown-alert > :last-child {
+ margin-bottom: 0;
+}
+.markdown-alert .markdown-alert-title {
+ display: flex;
+ font-weight: 500;
+ align-items: center;
+ line-height: 1;
+}
+.markdown-alert .markdown-alert-title .octicon {
+ margin-right: 0.5rem;
+ display: inline-block;
+ overflow: visible !important;
+ vertical-align: text-bottom;
+ fill: currentColor;
+}
+.markdown-alert-note {
+ border-left: .25rem solid var(--color-alert-note);
+}
+.markdown-alert-note .markdown-alert-title {
+ color: var(--color-alert-note);
+}
+.markdown-alert-tip {
+ border-left: .25rem solid var(--color-alert-tip);
+}
+.markdown-alert-tip .markdown-alert-title {
+ color: var(--color-alert-tip);
+}
+.markdown-alert-important {
+ border-left: .25rem solid var(--color-alert-important);
+}
+.markdown-alert-important .markdown-alert-title {
+ color: var(--color-alert-important);
+}
+.markdown-alert-warning {
+ border-left: .25rem solid var(--color-alert-warning);
+}
+.markdown-alert-warning .markdown-alert-title {
+ color: var(--color-alert-warning);
+}
+.markdown-alert-caution {
+ border-left: .25rem solid var(--color-alert-caution);
+}
+.markdown-alert-caution .markdown-alert-title {
+ color: var(--color-alert-caution);
+}
/* --------------------------------------------------------------------------
* MISCELLANEOUS ------------------------------------------------------------ */
/* headings */
@@ -165,13 +234,6 @@ h1, h2 {
border-bottom: 0.2px solid #444;
padding-bottom: 0.75rem;
}
-/* quotes */
-blockquote {
- padding: 0 1em;
- color: #6a6a6a;
- border-left: .25em solid #353535;
- margin-left: 0
-}
/* images */
img, svg { max-width: 100%; }
@@ -186,13 +248,20 @@ kbd {
/* highlight/mark */
mark {
- background-color: rgba(255, 255, 175, 0.8);
- color: #222;
+ background-color: rgba(255, 255, 175, 0.8);
+ color: #222;
}
/* --------------------------------------------------------------------------
* LIGHT MODE --------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
+ :root {
+ --color-alert-note: #0969da;
+ --color-alert-tip: #1a7f37;
+ --color-alert-important: #8250df;
+ --color-alert-warning: #bf8700;
+ --color-alert-caution: #cf222e;
+ }
html {
background-color: white;
color: #1f2328;
diff --git a/tests/markdown-additional.md b/tests/markdown-additional.md
index 99c16dd6..87d7808a 100644
--- a/tests/markdown-additional.md
+++ b/tests/markdown-additional.md
@@ -32,3 +32,25 @@ Press Ctrl + C to copy, and Ctrl + V
## Custom attributes
This paragraph has a red background color.{style=background-color:red}
+
+## Github alert blockquote
+
+> [!NOTE]
+> Something to take into account
+
+> [!TIP]
+> Did you know you can do this and that
+
+> [!IMPORTANT]
+> Crucial information here
+
+> [!WARNING]
+> Critical content demanding immediate attention
+
+> [!CAUTION]
+> Do not do this and that!
+
+With a custom title:
+
+> [!NOTE] Foo bar
+> Hello
diff --git a/yarn.lock b/yarn.lock
index 0a7c953a..b5fceac1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1762,6 +1762,11 @@ markdown-it-footnote@^4.0.0:
resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz#02ede0cb68a42d7e7774c3abdc72d77aaa24c531"
integrity sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==
+markdown-it-github-alerts@^0.3.0:
+ version "0.3.0"
+ resolved "https://registry.yarnpkg.com/markdown-it-github-alerts/-/markdown-it-github-alerts-0.3.0.tgz#acab7db57f4e204c8d1c987403c367738d7026b0"
+ integrity sha512-qyIuDyfdrVGHhY+E/44yMyNA3ZnayaT/KKT2VgkIz1nmrgiuPkdgPUh4YBZwgJ9VKEGJvGd82Ndrc4oGftrJWg==
+
markdown-it-inject-linenumbers@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/markdown-it-inject-linenumbers/-/markdown-it-inject-linenumbers-0.3.0.tgz#654364fa7a2dcb5f4461ef6d29d2603b74b29fd7"