integrated alert preview

microsoft · Jul 29, 2024 · 285fe4c · 285fe4c
1 parent 546e550
commit 285fe4c
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 1 deletion.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -5,7 +5,6 @@
         "dbaeumer.vscode-eslint",
         "esbenp.prettier-vscode",
         "bierner.markdown-mermaid",
-        "kejun.markdown-alert",
         "astro-build.astro-vscode",
         "github.copilot-chat",
         "tldraw-org.tldraw-vscode",

diff --git a/packages/vscode/markdown.css b/packages/vscode/markdown.css
@@ -11,3 +11,92 @@
 .vscode-body details.genaiscript pre code.code-line {
     font-size: var(--markdown-font-size, 14px);
 }
+
+:root {
+    --color-note: #0969da;
+    --color-tip: #1a7f37;
+    --color-warning: #9a6700;
+    --color-severe: #bc4c00;
+    --color-caution: #d1242f;
+    --color-important: #8250df;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-note: #2f81f7;
+        --color-tip: #3fb950;
+        --color-warning: #d29922;
+        --color-severe: #db6d28;
+        --color-caution: #f85149;
+        --color-important: #a371f7;
+    }
+}
+
+.vscode-body .markdown-alert {
+    padding: 0.5rem 1rem;
+    margin-bottom: 16px;
+    color: inherit;
+    border-left: 0.25em solid #888;
+}
+
+.vscode-body .markdown-alert > :first-child {
+    margin-top: 0;
+}
+
+.vscode-body .markdown-alert > :last-child {
+    margin-bottom: 0;
+}
+
+.vscode-body .markdown-alert .markdown-alert-title {
+    display: flex;
+    font-weight: 500;
+    align-items: center;
+    line-height: 1;
+}
+
+.vscode-body .markdown-alert .markdown-alert-title .octicon {
+    margin-right: 0.5rem;
+    display: inline-block;
+    overflow: visible !important;
+    vertical-align: text-bottom;
+    fill: currentColor;
+}
+
+.vscode-body .markdown-alert.markdown-alert-note {
+    border-left-color: var(--color-note);
+}
+
+.vscode-body .markdown-alert.markdown-alert-note .markdown-alert-title {
+    color: var(--color-note);
+}
+
+.vscode-body .markdown-alert.markdown-alert-important {
+    border-left-color: var(--color-important);
+}
+
+.vscode-body .markdown-alert.markdown-alert-important .markdown-alert-title {
+    color: var(--color-important);
+}
+
+.vscode-body .markdown-alert.markdown-alert-warning {
+    border-left-color: var(--color-warning);
+}
+
+.vscode-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
+    color: var(--color-warning);
+}
+
+.vscode-body .markdown-alert.markdown-alert-tip {
+    border-left-color: var(--color-tip);
+}
+
+.vscode-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
+    color: var(--color-tip);
+}
+
+.vscode-body .markdown-alert.markdown-alert-caution {
+    border-left-color: var(--color-caution);
+}
+
+.vscode-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
+    color: var(--color-caution);
+}
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -52,6 +52,7 @@
         "url": "https://github.com/microsoft/genaiscript"
     },
     "contributes": {
+        "markdown.markdownItPlugins": true,
         "walkthroughs": [
             {
                 "id": "genaiscript.tutorial",
@@ -365,6 +366,7 @@
         "@vscode/vsce": "^2.31.1",
         "assert": "^2.1.0",
         "eslint": "^9.7.0",
+        "markdown-it-github-alerts": "^0.3.0",
         "process": "^0.11.10",
         "typescript": "5.5.4",
         "vscode-uri": "^3.0.8",

diff --git a/packages/vscode/src/extension.ts b/packages/vscode/src/extension.ts
@@ -13,6 +13,8 @@ import { activateDocsNotebook } from "./docsnotebook"
 import { activateTraceTreeDataProvider } from "./tracetree"
 import { registerCommand } from "./commands"
 import { EXTENSION_ID, TOOL_NAME } from "../../core/src/constants"
+import type MarkdownIt from "markdown-it"
+import MarkdownItGitHubAlerts from "markdown-it-github-alerts"
 
 export async function activate(context: ExtensionContext) {
     const state = new ExtensionState(context)
@@ -85,4 +87,10 @@ export async function activate(context: ExtensionContext) {
 
     await state.activate()
     await activateTestController(state)
+
+    return {
+        extendMarkdownIt: (md: MarkdownIt) => {
+            return md.use(MarkdownItGitHubAlerts)
+        },
+    }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -7669,6 +7669,11 @@ markdown-it-footnote@^4.0.0:
   resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz#02ede0cb68a42d7e7774c3abdc72d77aaa24c531"
   integrity sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==
 
+markdown-it-github-alerts@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-github-alerts/-/markdown-it-github-alerts-0.3.0.tgz#acab7db57f4e204c8d1c987403c367738d7026b0"
+  integrity sha512-qyIuDyfdrVGHhY+E/44yMyNA3ZnayaT/KKT2VgkIz1nmrgiuPkdgPUh4YBZwgJ9VKEGJvGd82Ndrc4oGftrJWg==
+
 markdown-it-mdc@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/markdown-it-mdc/-/markdown-it-mdc-0.2.5.tgz#94ad523f828edb1249bb6c344b719435576a2aa1"