add support for alert blocks

GFM supports alert blocks like Tip & Note, but GH pages does not.
Port the logic over from the jsguide to use on all GH markdown pages.

_includes/head-custom.html

@@ -1,2 +1,3 @@
 <link rel="shortcut icon" type="image/x-icon" href="/styleguide/favicon.ico">
 <link rel="stylesheet" href="/styleguide/include/mdguide.css">
+<script type="module" src="/styleguide/include/mdguide_main.js"></script>

include/mdguide.css

@@ -9,12 +9,28 @@
 :root {
   --goodcode-bg-color: #f8fff8;
   --badcode-bg-color: #fff8f8;
+  --callout-important-border-color: #ad0303;
+  --callout-important-fg-color: #ad0303;
+  --callout-important-bg-color: #ffefe1;
+  --callout-note-border-color: #1a6ebb;
+  --callout-note-fg-color: #1a6ebb;
+  --callout-note-bg-color: #e1f5fe;
+  --callout-tip-border-color: #267769;
+  --callout-tip-fg-color: #267769;
+  --callout-tip-bg-color: #e0f2f1;
+  --callout-warning-border-color: #a52714;
+  --callout-warning-fg-color: #a52714;
+  --callout-warning-bg-color: #fbe9e7;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --goodcode-bg-color: #273322;
     --badcode-bg-color: #332822;
+    --callout-important-bg-color: #eeded0;
+    --callout-note-bg-color: #d0e4ed;
+    --callout-tip-bg-color: #cfe1e0;
+    --callout-warning-bg-color: #ead8d6;
   }
 }
 
@@ -78,3 +94,32 @@ div.markdown-body div.numbered ~ h4::before {
   content: counter(h2) '.' counter(h3) '.' counter(h4) ' ';
   counter-increment: h4;
 }
+
+/**
+ * Internal callouts akin to GitHub alerts.
+ * devtools/markdown/service/public/styles/markdown/callout.scss
+ */
+
+.callout-important {
+  background-color: var(--callout-important-bg-color) !important;
+  border-left-color: var(--callout-important-border-color) !important;
+  color: var(--callout-important-fg-color) !important;
+}
+
+.callout-note {
+  background-color: var(--callout-note-bg-color) !important;
+  border-left-color: var(--callout-note-border-color) !important;
+  color: var(--callout-note-fg-color) !important;
+}
+
+.callout-tip {
+  background-color: var(--callout-tip-bg-color) !important;
+  border-left-color: var(--callout-tip-border-color) !important;
+  color: var(--callout-tip-fg-color) !important;
+}
+
+.callout-warning {
+  background-color: var(--callout-warning-bg-color) !important;
+  border-left-color: var(--callout-warning-border-color) !important;
+  color: var(--callout-warning-fg-color) !important;
+}

include/mdguide.js

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Various helper functions.
+ */
+
+/** @const {!Set<string>} */
+const knownCallouts = new Set(['important', 'note', 'tip', 'warning']);
+
+/**
+ * Returns the callout type if the element starts with a known callout prefix.
+ * @param {!Element} ele
+ * @return {?string}
+ */
+function matchCallout(ele) {
+  const match = /^\s*([a-z]+):/i.exec(ele.textContent);
+  if (!match) {
+    return null;
+  }
+  const callout = match[1].toLowerCase();
+  return knownCallouts.has(callout) ? callout : null;
+}
+
+/**
+ * If a paragraph starts with (e.g.) "Note:" or "Tip:" then add that
+ * "callout class" to its element.
+ * @param {!Document} document
+ */
+export function styleAlerts(document) {
+  const selectors = [
+    // Autodetect paragraphs that *look* like alerts to automatically convert to
+    // a callout (put it into a blockquote). This is what internal g3mark does.
+    '.markdown-body > p',
+    // Process blockquotes that are extremely likely to be an "alert".
+    '.markdown-body > blockquote > p:first-child',
+  ];
+  for (const ele of document.querySelectorAll(selectors.join(', '))) {
+    const callout = matchCallout(ele);
+    if (!callout) {
+      continue;
+    }
+
+    // Convert plain paragraph to a blockquote before styling it further.
+    let container = ele.parentElement;
+    if (container.tagName !== 'BLOCKQUOTE') {
+      container = document.createElement('blockquote');
+      ele.replaceWith(container);
+      container.appendChild(ele);
+    }
+
+    // Add the callout style to blockquotes.
+    container.classList.add(`callout-${callout}`);
+  }
+}

include/mdguide_main.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Main entry point for HTML files to support CSP.
+ */
+
+import {styleAlerts} from './mdguide.js';
+
+/**
+ * Initialize the page.
+ */
+function main() {
+  const document = window.document;
+  styleAlerts(document);
+}
+
+// We're loaded as a module which defers execution until after the DOM is ready.
+// Which means we don't need to register an event, simply execute.
+main();