diff --git a/sass/_variables.scss b/sass/_variables.scss
index 42182ce..c32c710 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -14,3 +14,8 @@ $code_font: 400 1.125rem/1.75 SFMono-Regular,Consolas,Liberation Mono,Menlo,mono
 
 $quote-bg: #dcdcdc;
 $quote-border: #808080 8px solid;
+$quote-alert-note-color: #1863b6;
+$quote-alert-tip-color: #10712b;
+$quote-alert-important-color: #7544d0;
+$quote-alert-warning-color: #915f00;
+$quote-alert-caution-color: #bf1626;
diff --git a/sass/main.scss b/sass/main.scss
index c8e55a6..8f689a5 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -352,5 +352,60 @@ blockquote {
   padding: 0 20px;
 }
 
+blockquote.markdown-alert-note:before {
+  content: "🔍 Note";
+  font-weight: bold;
+  color: $quote-alert-note-color;
+}
+
+blockquote.markdown-alert-note {
+  border-left-color: $quote-alert-note-color;
+  background-color: $background;
+}
+
+blockquote.markdown-alert-tip:before {
+  content: "💡 Tip";
+  font-weight: bold;
+  color: $quote-alert-tip-color;
+}
+
+blockquote.markdown-alert-tip {
+  border-left-color: $quote-alert-tip-color;
+  background-color: $background;
+}
+
+blockquote.markdown-alert-warning:before {
+  content: "⚠️ Warning";
+  font-weight: bold;
+  color: $quote-alert-warning-color;
+}
+
+blockquote.markdown-alert-warning {
+  border-left-color: $quote-alert-warning-color;
+  background-color: $background;
+}
+
+blockquote.markdown-alert-important:before {
+  content: "📌 Important";
+  font-weight: bold;
+  color: $quote-alert-important-color;
+}
+
+blockquote.markdown-alert-important {
+  border-left-color: $quote-alert-important-color;
+  background-color: $background;
+}
+
+blockquote.markdown-alert-caution:before {
+  content: "☢️ Caution";
+  font-weight: bold;
+  color: $quote-alert-caution-color;
+}
+
+blockquote.markdown-alert-caution {
+  border-left-color: $quote-alert-caution-color;
+  background-color: $background;
+}
+
 @import "fabric-icons-inline";
 @import "search";