Use CSS class markdown-alert instead of alert

src/html.rs

@@ -1155,13 +1155,14 @@ where
             NodeValue::Alert(ref alert) => {
                 if entering {
                     self.cr()?;
-                    self.output.write_all(b"<div class=\"alert ")?;
+                    self.output.write_all(b"<div class=\"markdown-alert ")?;
                     self.output
                         .write_all(alert.alert_type.css_class().as_bytes())?;
                     self.output.write_all(b"\"")?;
                     self.render_sourcepos(node)?;
                     self.output.write_all(b">\n")?;
-                    self.output.write_all(b"<p class=\"alert-title\">")?;
+                    self.output
+                        .write_all(b"<p class=\"markdown-alert-title\">")?;
                     match alert.title {
                         Some(ref title) => self.escape(title.as_bytes())?,
                         None => {

src/parser/alert.rs

@@ -52,11 +52,11 @@ impl AlertType {
     /// Returns the CSS class to use for an alert type
     pub(crate) fn css_class(&self) -> String {
         match *self {
-            AlertType::Note => String::from("alert-note"),
-            AlertType::Tip => String::from("alert-tip"),
-            AlertType::Important => String::from("alert-important"),
-            AlertType::Warning => String::from("alert-warning"),
-            AlertType::Caution => String::from("alert-caution"),
+            AlertType::Note => String::from("markdown-alert-note"),
+            AlertType::Tip => String::from("markdown-alert-tip"),
+            AlertType::Important => String::from("markdown-alert-important"),
+            AlertType::Warning => String::from("markdown-alert-warning"),
+            AlertType::Caution => String::from("markdown-alert-caution"),
         }
     }
 }

src/parser/mod.rs

@@ -434,7 +434,7 @@ pub struct ExtensionOptions<'c> {
     /// let mut options = Options::default();
     /// options.extension.alerts = true;
     /// assert_eq!(markdown_to_html("> [!note]\n> Something of note", &options),
-    ///            "<div class=\"alert alert-note\">\n<p class=\"alert-title\">Note</p>\n<p>Something of note</p>\n</div>\n");
+    ///            "<div class=\"markdown-alert markdown-alert-note\">\n<p class=\"markdown-alert-title\">Note</p>\n<p>Something of note</p>\n</div>\n");
     /// ```
     #[cfg_attr(feature = "bon", builder(default))]
     pub alerts: bool,

src/tests/alerts.rs

@@ -6,8 +6,8 @@ fn alerts() {
         [extension.alerts],
         concat!("> [!note]\n", "> Pay attention\n",),
         concat!(
-            "<div class=\"alert alert-note\">\n",
-            "<p class=\"alert-title\">Note</p>\n",
+            "<div class=\"markdown-alert markdown-alert-note\">\n",
+            "<p class=\"markdown-alert-title\">Note</p>\n",
             "<p>Pay attention</p>\n",
             "</div>\n",
         ),
@@ -20,8 +20,8 @@ fn multiline_alerts() {
         [extension.alerts, extension.multiline_block_quotes],
         concat!(">>> [!note]\n", "Pay attention\n", ">>>",),
         concat!(
-            "<div class=\"alert alert-note\">\n",
-            "<p class=\"alert-title\">Note</p>\n",
+            "<div class=\"markdown-alert markdown-alert-note\">\n",
+            "<p class=\"markdown-alert-title\">Note</p>\n",
             "<p>Pay attention</p>\n",
             "</div>\n",
         ),

src/tests/fixtures/alerts.md

@@ -11,8 +11,8 @@ GitHub style alerts look like this:
 > [!NOTE]
 > Highlights information that users should take into account, even when skimming.
 .
-<div class="alert alert-note">
-<p class="alert-title">Note</p>
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">Note</p>
 <p>Highlights information that users should take into account, even when skimming.</p>
 </div>
 ````````````````````````````````
@@ -24,8 +24,8 @@ the `[!NOTE]`:
 > [!NOTE]  
 > Highlights information that users should take into account, even when skimming.
 .
-<div class="alert alert-note">
-<p class="alert-title">Note</p>
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">Note</p>
 <p>Highlights information that users should take into account, even when skimming.</p>
 </div>
 ````````````````````````````````
@@ -36,8 +36,8 @@ Uppercase isn't required:
 > [!note]
 > Highlights information that users should take into account, even when skimming.
 .
-<div class="alert alert-note">
-<p class="alert-title">Note</p>
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">Note</p>
 <p>Highlights information that users should take into account, even when skimming.</p>
 </div>
 ````````````````````````````````
@@ -51,8 +51,8 @@ Alerts can contain multiple blocks:
 >
 > Paragraph two.
 .
-<div class="alert alert-note">
-<p class="alert-title">Note</p>
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">Note</p>
 <p>Highlights information that users should take into account, even when skimming.</p>
 <p>Paragraph two.</p>
 </div>
@@ -64,8 +64,8 @@ Other kinds of alerts:
 > [!TIP]
 > Optional information to help a user be more successful.
 .
-<div class="alert alert-tip">
-<p class="alert-title">Tip</p>
+<div class="markdown-alert markdown-alert-tip">
+<p class="markdown-alert-title">Tip</p>
 <p>Optional information to help a user be more successful.</p>
 </div>
 ````````````````````````````````
@@ -74,8 +74,8 @@ Other kinds of alerts:
 > [!IMPORTANT]
 > Crucial information necessary for users to succeed.
 .
-<div class="alert alert-important">
-<p class="alert-title">Important</p>
+<div class="markdown-alert markdown-alert-important">
+<p class="markdown-alert-title">Important</p>
 <p>Crucial information necessary for users to succeed.</p>
 </div>
 ````````````````````````````````
@@ -84,8 +84,8 @@ Other kinds of alerts:
 > [!WARNING]
 > Critical content demanding immediate user attention due to potential risks.
 .
-<div class="alert alert-warning">
-<p class="alert-title">Warning</p>
+<div class="markdown-alert markdown-alert-warning">
+<p class="markdown-alert-title">Warning</p>
 <p>Critical content demanding immediate user attention due to potential risks.</p>
 </div>
 ````````````````````````````````
@@ -94,8 +94,8 @@ Other kinds of alerts:
 > [!CAUTION]
 > Negative potential consequences of an action.
 .
-<div class="alert alert-caution">
-<p class="alert-title">Caution</p>
+<div class="markdown-alert markdown-alert-caution">
+<p class="markdown-alert-title">Caution</p>
 <p>Negative potential consequences of an action.</p>
 </div>
 ````````````````````````````````
@@ -106,8 +106,8 @@ A title can be specified to override the default title:
 > [!NOTE] Pay attention
 > Highlights information that users should take into account, even when skimming.
 .
-<div class="alert alert-note">
-<p class="alert-title">Pay attention</p>
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">Pay attention</p>
 <p>Highlights information that users should take into account, even when skimming.</p>
 </div>
 ````````````````````````````````
@@ -118,8 +118,8 @@ The title does not process markdown and is escaped:
 > [!NOTE] **Pay** attention <script>
 > Highlights information that users should take into account, even when skimming.
 .
-<div class="alert alert-note">
-<p class="alert-title">**Pay** attention &lt;script&gt;</p>
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">**Pay** attention &lt;script&gt;</p>
 <p>Highlights information that users should take into account, even when skimming.</p>
 </div>
 ````````````````````````````````
@@ -135,8 +135,8 @@ They work in the same places as a normal blockquote would, such as in a list ite
 <ul>
 <li>
 <p>Item one</p>
-<div class="alert alert-note">
-<p class="alert-title">Note</p>
+<div class="markdown-alert markdown-alert-note">
+<p class="markdown-alert-title">Note</p>
 <p>Highlights information that users should take into account, even when skimming.</p>
 </div>
 </li>