mrmd-editor 0.7.1 → 0.8.0

package/src/markdown/renderer.js

@@ -15,6 +15,7 @@
 import { ViewPlugin, Decoration, WidgetType } from '@codemirror/view';
 import { Facet } from '@codemirror/state';
 import { syntaxTree } from '@codemirror/language';
+import { sourceModeFacet, wysiwygModeFacet } from './facets.js';
 
 // =============================================================================
 // Asset Resolver Facet
@@ -49,6 +50,7 @@ import {
 // Tables handled by StateField (block-decorations.js) - multi-line replace not allowed in ViewPlugin
 import { TaskCheckboxWidget } from './widgets/checkbox.js';
 import { AlertTitleWidget } from './widgets/alert-title.js';
+import { ListMarkerWidget } from './widgets/list-marker.js';
 import {
   InlineMathWidget,
   extractInlineMath,
@@ -239,6 +241,93 @@ class ImageSpacerWidget extends WidgetType {
   }
 }
 
+const ALERT_TYPE_MAP = {
+  note: 'note',
+  tip: 'tip',
+  important: 'important',
+  warning: 'warning',
+  caution: 'caution',
+  info: 'note',
+  abstract: 'note',
+  success: 'tip',
+  question: 'important',
+  failure: 'caution',
+  danger: 'caution',
+  bug: 'caution',
+};
+
+function toTitleCase(text) {
+  if (!text) return '';
+  return text
+    .replace(/[-_]+/g, ' ')
+    .trim()
+    .split(/\s+/)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(' ');
+}
+
+function normalizeAlertType(type) {
+  const lower = (type || '').toLowerCase();
+  return ALERT_TYPE_MAP[lower] || 'note';
+}
+
+/**
+ * Find MkDocs-style admonitions:
+ *
+ * !!! tip
+ *     indented body
+ */
+function findBangAdmonitions(doc) {
+  const ranges = [];
+
+  for (let i = 1; i <= doc.lines; i++) {
+    const startLine = doc.line(i);
+    const match = startLine.text.match(/^(\s*)!!!\s+([A-Za-z][\w-]*)(?:\s+"([^"]+)")?\s*$/);
+    if (!match) continue;
+
+    const baseIndent = match[1] || '';
+    const bodyIndentSpaces = `${baseIndent}    `;
+    const bodyIndentTab = `${baseIndent}\t`;
+
+    let endLine = i;
+    let hasBody = false;
+
+    for (let j = i + 1; j <= doc.lines; j++) {
+      const lineText = doc.line(j).text;
+
+      if (lineText.trim() === '') {
+        if (hasBody) {
+          endLine = j;
+          continue;
+        }
+        break;
+      }
+
+      if (lineText.startsWith(bodyIndentSpaces) || lineText.startsWith(bodyIndentTab)) {
+        hasBody = true;
+        endLine = j;
+        continue;
+      }
+
+      break;
+    }
+
+    ranges.push({
+      startLine: i,
+      endLine,
+      headerIndent: baseIndent.length,
+      bodyIndentSpaces,
+      bodyIndentTab,
+      alertType: normalizeAlertType(match[2]),
+      title: match[3] || toTitleCase(match[2]),
+    });
+
+    i = endLine;
+  }
+
+  return ranges;
+}
+
 /**
  * Build decorations for all markdown elements in the viewport.
  *
@@ -252,6 +341,10 @@ function buildDecorations(view) {
   const cursorLine = doc.lineAt(cursorPos).number;
   const frontmatterRange = findFrontmatterRange(doc);
 
+  // Mode flags
+  const isSourceMode = view.state.facet(sourceModeFacet);
+  const isWysiwygMode = view.state.facet(wysiwygModeFacet);
+
   // Get asset resolver from facet (may be null)
   const assetResolver = view.state.facet(assetResolverFacet);
 
@@ -292,7 +385,7 @@ function buildDecorations(view) {
         }
       }
 
-      const isActiveLine = lineNum === cursorLine;
+      const isActiveLine = isSourceMode || (!isWysiwygMode && lineNum === cursorLine);
 
       // Marker class: hidden on blur, muted on focus
       const markerClass = isActiveLine ? 'cm-md-marker' : 'cm-md-hidden';
@@ -386,8 +479,9 @@ function buildDecorations(view) {
       // Code backticks (inline only, not fenced code)
       if (node.name === 'CodeMark') {
         const text = doc.sliceString(node.from, node.to);
-        // Only hide single/double backticks, not fenced code markers (```)
-        if (text.length < 3) {
+        // In normal rendered mode, only hide inline backticks.
+        // In WYSIWYG mode, also hide fenced code markers.
+        if (text.length < 3 || isWysiwygMode) {
           decorations.push(
             Decoration.mark({ class: markerClass }).range(node.from, node.to)
           );
@@ -429,7 +523,7 @@ function buildDecorations(view) {
         const linkUrl = linkMatch[2];
 
         const linkLine = doc.lineAt(node.from).number;
-        const isLinkActive = linkLine === cursorLine;
+        const isLinkActive = isSourceMode || (!isWysiwygMode && linkLine === cursorLine);
 
         if (isLinkActive) {
           // Show raw markdown with styling on active line
@@ -517,7 +611,7 @@ function buildDecorations(view) {
         }
 
         // Replace the alert marker [!TYPE] with widget when not on that line
-        if (alertType && startLine.number !== cursorLine) {
+        if (alertType && !isSourceMode && (isWysiwygMode || startLine.number !== cursorLine)) {
           const markerStart = startLine.from + firstLineText.indexOf('[!');
           const markerEnd = startLine.from + firstLineText.indexOf(']') + 1;
           if (markerStart >= startLine.from && markerEnd > markerStart) {
@@ -541,9 +635,30 @@ function buildDecorations(view) {
       // LISTS
       // =======================================================================
       if (node.name === 'ListMark') {
-        decorations.push(
-          Decoration.mark({ class: 'cm-md-list-marker' }).range(node.from, node.to)
-        );
+        const line = doc.lineAt(node.from);
+        const listMarkText = doc.sliceString(node.from, node.to);
+        const isListActive = isSourceMode || (!isWysiwygMode && line.number === cursorLine);
+        const isUnordered = /^[-+*]$/.test(listMarkText);
+        const textAfterMarker = doc.sliceString(node.to, Math.min(node.to + 6, line.to));
+        const isTaskItem = /^\s+\[[ xX]\]/.test(textAfterMarker);
+
+        if (isListActive) {
+          decorations.push(
+            Decoration.mark({ class: 'cm-md-marker cm-md-list-marker' }).range(node.from, node.to)
+          );
+        } else if (isUnordered && !isTaskItem) {
+          decorations.push(
+            Decoration.replace({ widget: new ListMarkerWidget() }).range(node.from, node.to)
+          );
+        } else if (isTaskItem) {
+          decorations.push(
+            Decoration.mark({ class: 'cm-md-hidden' }).range(node.from, node.to)
+          );
+        } else {
+          decorations.push(
+            Decoration.mark({ class: 'cm-md-list-marker cm-md-list-number' }).range(node.from, node.to)
+          );
+        }
       }
 
       // Task list checkboxes: - [ ] or - [x]
@@ -559,7 +674,7 @@ function buildDecorations(view) {
 
           // Don't render widget if cursor is on this line
           const itemLine = doc.lineAt(node.from);
-          if (itemLine.number !== cursorLine) {
+          if (!isSourceMode && (isWysiwygMode || itemLine.number !== cursorLine)) {
             // Replace [ ], [x], or [X] with checkbox widget
             decorations.push(
               Decoration.replace({
@@ -583,6 +698,27 @@ function buildDecorations(view) {
         );
       }
 
+      // =======================================================================
+      // PAGE BREAKS (\pagebreak, \newpage)
+      // Detected as single-line paragraphs containing only the command.
+      // In WYSIWYG mode, rendered as a visual break indicator.
+      // =======================================================================
+      if (node.name === 'Paragraph' || node.name === 'HTMLBlock') {
+        const nodeText = doc.sliceString(node.from, node.to).trim();
+        if (/^\\(pagebreak|newpage)$/.test(nodeText) ||
+            /^<div\s+style\s*=\s*["']page-break-after:\s*always;?["']\s*>\s*<\/div>$/i.test(nodeText)) {
+          const line = doc.lineAt(node.from);
+          decorations.push(
+            Decoration.line({ class: 'cm-pagebreak-line' }).range(line.from)
+          );
+          if (!isActiveLine) {
+            decorations.push(
+              Decoration.mark({ class: 'cm-md-hidden' }).range(node.from, node.to)
+            );
+          }
+        }
+      }
+
       // =======================================================================
       // IMAGES
       // =======================================================================
@@ -769,6 +905,72 @@ function buildDecorations(view) {
     }
   });
 
+  // ==========================================================================
+  // MKDOCS-STYLE ADMONITIONS: !!! tip / !!! warning / ...
+  // ==========================================================================
+  const bangAdmonitions = findBangAdmonitions(doc);
+  const viewportStartLine = doc.lineAt(view.viewport.from).number;
+  const viewportEndLine = doc.lineAt(view.viewport.to).number;
+
+  for (const admonition of bangAdmonitions) {
+    // Skip if out of viewport
+    if (admonition.endLine < viewportStartLine || admonition.startLine > viewportEndLine) {
+      continue;
+    }
+
+    // Skip if inside frontmatter or fenced code block
+    if (
+      (frontmatterRange &&
+        admonition.startLine >= frontmatterRange.startLine &&
+        admonition.startLine <= frontmatterRange.endLine) ||
+      codeBlockLines.has(admonition.startLine)
+    ) {
+      continue;
+    }
+
+    const cursorInAdmonition = isSourceMode || (!isWysiwygMode && cursorLine >= admonition.startLine && cursorLine <= admonition.endLine);
+    if (cursorInAdmonition) {
+      continue;
+    }
+
+    const visibleStart = Math.max(admonition.startLine, viewportStartLine);
+    const visibleEnd = Math.min(admonition.endLine, viewportEndLine);
+
+    for (let lineNum = visibleStart; lineNum <= visibleEnd; lineNum++) {
+      const line = doc.line(lineNum);
+      const classes = [
+        `cm-md-alert-${admonition.alertType}`,
+        'cm-md-admonition-line',
+      ];
+
+      if (lineNum === admonition.startLine) classes.push('cm-md-admonition-start', 'cm-md-admonition-title-line');
+      if (lineNum === admonition.endLine) classes.push('cm-md-admonition-end');
+
+      decorations.push(
+        Decoration.line({ class: classes.join(' ') }).range(line.from)
+      );
+
+      if (lineNum === admonition.startLine) {
+        const from = line.from + admonition.headerIndent;
+        if (from < line.to) {
+          decorations.push(
+            Decoration.replace({
+              widget: new AlertTitleWidget(admonition.alertType, admonition.title),
+            }).range(from, line.to)
+          );
+        }
+      } else if (line.text.startsWith(admonition.bodyIndentSpaces)) {
+        decorations.push(
+          Decoration.mark({ class: 'cm-md-hidden' }).range(line.from, line.from + admonition.bodyIndentSpaces.length)
+        );
+      } else if (line.text.startsWith(admonition.bodyIndentTab)) {
+        decorations.push(
+          Decoration.mark({ class: 'cm-md-hidden' }).range(line.from, line.from + admonition.bodyIndentTab.length)
+        );
+      }
+    }
+  }
+
   // ==========================================================================
   // INLINE MATH: $...$ (single line only)
   // ==========================================================================
@@ -776,7 +978,7 @@ function buildDecorations(view) {
   // Process line by line in viewport
   for (let i = doc.lineAt(view.viewport.from).number; i <= doc.lineAt(view.viewport.to).number; i++) {
     const line = doc.line(i);
-    const isActiveLine = i === cursorLine;
+    const isActiveLine = isSourceMode || (!isWysiwygMode && i === cursorLine);
 
     // Skip frontmatter lines
     if (frontmatterRange && i >= frontmatterRange.startLine && i <= frontmatterRange.endLine) continue;
@@ -814,7 +1016,7 @@ function buildDecorations(view) {
   // ==========================================================================
   for (let i = doc.lineAt(view.viewport.from).number; i <= doc.lineAt(view.viewport.to).number; i++) {
     const line = doc.line(i);
-    const isActiveLine = i === cursorLine;
+    const isActiveLine = isSourceMode || (!isWysiwygMode && i === cursorLine);
 
     // Skip frontmatter lines
     if (frontmatterRange && i >= frontmatterRange.startLine && i <= frontmatterRange.endLine) continue;
@@ -857,7 +1059,7 @@ function buildDecorations(view) {
 
   for (let i = doc.lineAt(view.viewport.from).number; i <= doc.lineAt(view.viewport.to).number; i++) {
     const line = doc.line(i);
-    const isActiveLine = i === cursorLine;
+    const isActiveLine = isSourceMode || (!isWysiwygMode && i === cursorLine);
 
     // Skip frontmatter lines
     if (frontmatterRange && i >= frontmatterRange.startLine && i <= frontmatterRange.endLine) continue;
@@ -868,6 +1070,11 @@ function buildDecorations(view) {
     const htmlElements = extractHtmlElements(line.text);
 
     for (const el of htmlElements) {
+      // Underline is handled by the shared inline formatting model so it can
+      // participate in semantic toggling like bold/italic instead of being
+      // rendered as an opaque HTML widget.
+      if (el.tag === 'u') continue;
+
       const from = line.from + el.start;
       const to = line.from + el.end;
 

package/src/markdown/styles.js

@@ -102,6 +102,12 @@ export const markdownStyles = `
   font-style: italic;
 }
 
+.cm-md-underline {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
 .cm-md-strikethrough {
   text-decoration: line-through;
   opacity: 0.7;
@@ -217,22 +223,58 @@ export const markdownStyles = `
 
 .cm-md-alert-note {
   border-left-color: var(--md-alert-note-color);
+  --md-alert-accent: var(--md-alert-note-color);
 }
 
 .cm-md-alert-tip {
   border-left-color: var(--md-alert-tip-color);
+  --md-alert-accent: var(--md-alert-tip-color);
 }
 
 .cm-md-alert-important {
   border-left-color: var(--md-alert-important-color);
+  --md-alert-accent: var(--md-alert-important-color);
 }
 
 .cm-md-alert-warning {
   border-left-color: var(--md-alert-warning-color);
+  --md-alert-accent: var(--md-alert-warning-color);
 }
 
 .cm-md-alert-caution {
   border-left-color: var(--md-alert-caution-color);
+  --md-alert-accent: var(--md-alert-caution-color);
+}
+
+/* MkDocs-style !!! admonitions (card style with title bar) */
+.cm-md-admonition-line {
+  border-left: var(--md-admonition-border-width, 1px) solid var(--md-admonition-border-color, color-mix(in srgb, var(--md-alert-accent, var(--widget-border-accent)) 46%, var(--widget-border) 54%));
+  border-right: var(--md-admonition-border-width, 1px) solid var(--md-admonition-border-color, color-mix(in srgb, var(--md-alert-accent, var(--widget-border-accent)) 46%, var(--widget-border) 54%));
+  background: var(--md-admonition-body-background, var(--md-admonition-background, color-mix(in srgb, var(--md-alert-accent, var(--widget-border-accent)) 5%, var(--editor-background, transparent) 95%)));
+  color: var(--md-admonition-text-color, inherit);
+  padding-left: var(--md-admonition-padding-x, 0.9em);
+  padding-right: var(--md-admonition-padding-x, 0.9em);
+}
+
+.cm-md-admonition-start {
+  border-top: var(--md-admonition-border-width, 1px) solid var(--md-admonition-border-color, color-mix(in srgb, var(--md-alert-accent, var(--widget-border-accent)) 46%, var(--widget-border) 54%));
+  border-top-left-radius: var(--md-admonition-radius, 6px);
+  border-top-right-radius: var(--md-admonition-radius, 6px);
+  background: var(--md-admonition-title-background, color-mix(in srgb, var(--md-alert-accent, var(--widget-border-accent)) 14%, var(--editor-background, transparent) 86%));
+  padding-top: var(--md-admonition-padding-y, 0.35em);
+  padding-bottom: var(--md-admonition-padding-y, 0.35em);
+  border-bottom: 1px solid color-mix(in srgb, var(--md-admonition-border-color, var(--md-alert-accent, var(--widget-border-accent))) 55%, transparent);
+}
+
+.cm-md-admonition-end {
+  border-bottom: var(--md-admonition-border-width, 1px) solid var(--md-admonition-border-color, color-mix(in srgb, var(--md-alert-accent, var(--widget-border-accent)) 46%, var(--widget-border) 54%));
+  border-bottom-left-radius: var(--md-admonition-radius, 6px);
+  border-bottom-right-radius: var(--md-admonition-radius, 6px);
+  padding-bottom: calc(var(--md-admonition-padding-y, 0.35em) + 0.05em);
+}
+
+.cm-md-admonition-title-line {
+  color: var(--md-admonition-title-color, var(--md-alert-accent, var(--widget-text-accent)));
 }
 
 /* ==========================================================================
@@ -241,6 +283,19 @@ export const markdownStyles = `
 
 .cm-md-list-marker {
   color: var(--md-list-marker-color);
+  font-variant-numeric: tabular-nums;
+}
+
+.cm-md-list-number {
+  font-weight: var(--md-list-number-weight, 600);
+}
+
+.cm-md-list-bullet {
+  display: inline-block;
+  width: var(--md-list-bullet-width, 0.75em);
+  color: var(--md-list-marker-color);
+  font-weight: var(--md-list-bullet-weight, 700);
+  text-align: center;
 }
 
 /* ==========================================================================
@@ -322,6 +377,222 @@ export const markdownStyles = `
   padding: 0.5em 0;
 }
 
+/* Linked-table wrapper (header chrome + table snapshot) */
+.cm-linked-table-widget {
+  display: block;
+  margin: 0.35em 0;
+  padding: 0.45em 0.6em 0.55em;
+  border: 1px solid var(--widget-border, rgba(128, 128, 128, 0.2));
+  border-radius: var(--widget-border-radius, 8px);
+  background: color-mix(in srgb, var(--md-table-bg, var(--editor-background)) 92%, var(--widget-surface, transparent) 8%);
+}
+
+.cm-linked-table-widget .cm-table-widget {
+  padding: 0;
+  background: transparent;
+}
+
+.cm-linked-table-chrome {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75em;
+  margin-bottom: 0.45em;
+}
+
+.cm-linked-table-chrome-left {
+  display: flex;
+  align-items: baseline;
+  gap: 0.55em;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.cm-linked-table-title {
+  font-size: 0.95em;
+  font-weight: 600;
+  color: var(--widget-text);
+}
+
+.cm-linked-table-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  flex-wrap: wrap;
+}
+
+.cm-linked-table-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1em 0.45em;
+  border-radius: 999px;
+  background: var(--widget-surface, rgba(128, 128, 128, 0.12));
+  color: var(--widget-text-muted, inherit);
+  font-size: 0.75em;
+  line-height: 1.25;
+}
+
+.cm-linked-table-badge-linked {
+  color: var(--md-link-color, var(--widget-text));
+}
+
+.cm-linked-table-status-badge {
+  border: 1px solid transparent;
+}
+
+.cm-linked-table-status-pending,
+.cm-linked-table-status-claimed,
+.cm-linked-table-status-requested {
+  background: color-mix(in srgb, var(--widget-surface, rgba(128, 128, 128, 0.12)) 60%, var(--md-link-color, #64748b) 40%);
+  color: var(--widget-text);
+}
+
+.cm-linked-table-status-running,
+.cm-linked-table-status-writing {
+  background: color-mix(in srgb, var(--widget-surface, rgba(128, 128, 128, 0.12)) 45%, var(--mrmd-accent, #2563eb) 55%);
+  color: white;
+}
+
+.cm-linked-table-status-stale {
+  background: color-mix(in srgb, var(--widget-surface, rgba(128, 128, 128, 0.12)) 35%, var(--mrmd-warning, #d97706) 65%);
+  color: white;
+}
+
+.cm-linked-table-status-error {
+  background: color-mix(in srgb, var(--widget-surface, rgba(128, 128, 128, 0.12)) 35%, var(--mrmd-error, #dc2626) 65%);
+  color: white;
+}
+
+.cm-linked-table-status-fresh {
+  border-color: var(--widget-border, rgba(128, 128, 128, 0.2));
+}
+
+.cm-linked-table-status-active {
+  position: relative;
+}
+
+.cm-linked-table-status-active::after {
+  content: '';
+  width: 0.45em;
+  height: 0.45em;
+  margin-left: 0.4em;
+  border-radius: 999px;
+  background: currentColor;
+  display: inline-block;
+  opacity: 0.75;
+  animation: cm-linked-table-pulse 1s ease-in-out infinite;
+}
+
+@keyframes cm-linked-table-pulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.85); }
+  50% { opacity: 0.95; transform: scale(1); }
+}
+
+.cm-linked-table-widget[data-job-status="running"],
+.cm-linked-table-widget[data-job-status="writing"],
+.cm-linked-table-widget[data-job-status="requested"],
+.cm-linked-table-widget[data-job-status="claimed"] {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mrmd-accent, #2563eb) 35%, transparent 65%);
+}
+
+.cm-linked-table-widget[data-job-status="stale"] {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mrmd-warning, #d97706) 35%, transparent 65%);
+}
+
+.cm-linked-table-widget[data-job-status="error"] {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mrmd-error, #dc2626) 35%, transparent 65%);
+}
+
+.cm-linked-table-widget[aria-busy="true"] .cm-linked-table-sortable {
+  opacity: 0.7;
+}
+
+.cm-linked-table-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  flex-wrap: wrap;
+}
+
+.cm-linked-table-action {
+  appearance: none;
+  border: 1px solid var(--widget-border, rgba(128, 128, 128, 0.2));
+  background: var(--widget-surface, transparent);
+  color: var(--widget-text);
+  border-radius: 6px;
+  padding: 0.18em 0.5em;
+  font: inherit;
+  font-size: 0.78em;
+  cursor: pointer;
+}
+
+.cm-linked-table-action:hover {
+  background: var(--widget-surface-hover, rgba(128, 128, 128, 0.08));
+}
+
+.cm-linked-table-caption {
+  font-size: 0.85em;
+  color: var(--widget-text-muted);
+  font-style: italic;
+  line-height: 1.35;
+}
+
+.cm-linked-table-caption-above {
+  margin: 0 0 0.35em;
+}
+
+.cm-linked-table-caption-below {
+  margin: 0.45em 0 0;
+}
+
+.cm-linked-table-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.cm-linked-table-sortable::after {
+  content: ' ↕';
+  opacity: 0.35;
+  font-size: 0.8em;
+}
+
+.cm-linked-table-sortable:hover::after {
+  opacity: 0.65;
+}
+
+.cm-linked-table-source-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75em;
+  margin: 0.25em 0 0.4em;
+  padding: 0.35em 0.5em;
+  border: 1px dashed var(--widget-border, rgba(128, 128, 128, 0.24));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--widget-surface, transparent) 30%, var(--editor-background, transparent) 70%);
+}
+
+.cm-linked-table-source-banner-text {
+  font-size: 0.82em;
+  color: var(--widget-text-muted, inherit);
+}
+
+.cm-linked-table-source-banner-action {
+  appearance: none;
+  border: 1px solid var(--widget-border, rgba(128, 128, 128, 0.24));
+  background: var(--widget-surface, transparent);
+  color: var(--widget-text, inherit);
+  border-radius: 6px;
+  padding: 0.16em 0.5em;
+  font: inherit;
+  font-size: 0.78em;
+  cursor: pointer;
+}
+
+.cm-linked-table-source-banner-action:hover {
+  background: var(--widget-surface-hover, rgba(128, 128, 128, 0.08));
+}
+
 /* The table element */
 .cm-table {
   display: table;
@@ -854,11 +1125,16 @@ export const markdownStyles = `
 .cm-alert-title {
   display: inline-flex;
   align-items: center;
-  gap: 0.4em;
-  font-weight: 600;
+  gap: 0.45em;
+  font-weight: 650;
   margin-bottom: 0.25em;
 }
 
+.cm-md-admonition-title-line .cm-alert-title {
+  margin-bottom: 0;
+  color: var(--md-admonition-title-color, var(--md-alert-accent, var(--widget-text-accent)));
+}
+
 .cm-alert-title-note {
   color: var(--md-alert-note-color);
 }
@@ -881,7 +1157,18 @@ export const markdownStyles = `
 
 /* Alert icons */
 .cm-alert-icon {
-  font-size: 1.1em;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75em;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--md-admonition-title-color, currentColor);
+  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
+  background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
 /* ==========================================================================