Merge pull request #118 from tuurep/issue/89-github-alert-block-quotes

GitHub alert block quotes

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",

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);

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,20 +165,75 @@ 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 */
 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;

tests/markdown-additional.md

@@ -32,3 +32,25 @@ Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, and <kbd>Ctrl</kbd> + <kbd>V</kbd>
 ## 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

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"