adjust site

Author: quantizor

docs/index.html

@@ -58,7 +58,7 @@
 <small>Sample content borrowed with thanks from [elm-markdown](http://elm-lang.org/examples/markdown) ❤️</small>
 
 > [!Tip]
-> Normal and "alert" blockquotes are possible. Use `renderRule` for more control if needed.
+> Normal and "alert" blockquotes are possible. Use `renderRule` for more control if needed. Classes like `.markdown-alert-[type]` are provided as styling hooks.
 
 Custom handling of code blocks (or any rule!) is possible with the [`renderRule` option](https://github.com/quantizor/markdown-to-jsx#optionsrenderrule). For example, LaTeX support via [`@matejmazur/react-katex`](https://www.npmjs.com/package/@matejmazur/react-katex):
 

site.tsx

@@ -196,6 +196,42 @@ const GlobalStyles = createGlobalStyle`
       }
     }
 
+    &.markdown-alert-note header {
+      color: cornflowerblue;
+
+      &::before {
+        content: 'ⓘ';
+        margin-right: 4px;
+      }
+    }
+
+    &.markdown-alert-important header {
+      color: darkorchid;
+
+      &::before {
+        content: '❕';
+        margin-right: 4px;
+      }
+    }
+
+    &.markdown-alert-warning header {
+      color: gold;
+
+      &::before {
+        content: '⚠️';
+        margin-right: 4px;
+      }
+    }
+
+    &.markdown-alert-caution header {
+      color: red;
+
+      &::before {
+        content: '🛑';
+        margin-right: 4px;
+      }
+    }
+
     header + * {
       margin-top: 0.25em;
     }
@@ -285,6 +321,8 @@ const Compiled = styled.div`
   ${sharedCss};
   padding-left: 2rem;
   padding-right: 1rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
   overflow: auto;
   overflow-x: hidden;
 `