add alert note display

package.json

@@ -26,6 +26,7 @@
     "markdown-it-block-embed": "^0.0.3",
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-footnote": "^3.0.3",
+    "markdown-it-github-alerts": "^0.3.0",
     "markdown-it-iframe": "^1.0.0",
     "markdown-it-latex": "^0.2.0",
     "markdown-it-shikiji": "^0.9.18",

src/hooks/useMarkdown.hook.ts

@@ -4,6 +4,7 @@ import Renderer from 'markdown-it/lib/renderer'
 import blockEmbedPlugin from 'markdown-it-block-embed'
 import markdownItCheckbox from 'markdown-it-checkbox'
 import markdownItFootnote from 'markdown-it-footnote'
+import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
 import markdownItIframe from 'markdown-it-iframe'
 import markdownItLatex from 'markdown-it-latex'
 import Shikiji from 'markdown-it-shikiji'
@@ -40,6 +41,7 @@ const md = new MarkdownIt({
     width: '100%',
     height: 400
   })
+  .use(MarkdownItGitHubAlerts)
 
 const useShikiji = async () => {
   const shikiji = await Shikiji({

src/styles/app.scss

@@ -5,13 +5,14 @@ $primary: #2c3a47;
 $link: #445fb9;
 $light-link: lighten($link, 45%);
 $family-primary: "Courier Prime", monospace;
+$background: #ffffff;
 
 :root {
   --primary-color: #{$primary};
   --font-family: #{$family-primary};
   --font-color: #4a4a4a;
   --light-link: #{$light-link};
-  --background-color: #ffffff;
+  --background-color: #{$background};
   --note-width: 620px;
 }
 
@@ -106,3 +107,10 @@ pre {
 code {
   font-family: var(--font-family);
 }
+
+.markdown-alert {
+  padding: 1rem;
+  background-color: #ecf0f1;
+  border-radius: 1rem;
+  margin: 1rem 0;
+}