@marimo-team/islands 0.23.10-dev24 → 0.23.10-dev25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev24",
+  "version": "0.23.10-dev25",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/documentation.css

@@ -153,3 +153,22 @@
     }
   }
 }
+
+/* Syntax highlighting for LSP hover code blocks (lezer classHighlighter tok-* classes) */
+.docs-documentation,
+.cm-tooltip .documentation {
+  .tok-keyword { color: light-dark(#708, #c678dd); font-weight: 500; }
+  .tok-string,
+  .tok-string2 { color: light-dark(#a11, #98c379); }
+  .tok-number { color: light-dark(#164, #d19a66); }
+  .tok-bool,
+  .tok-atom { color: light-dark(#219, #d19a66); }
+  .tok-comment { color: var(--cm-comment); }
+  .tok-className { color: light-dark(#00f, #61afef); }
+  .tok-typeName,
+  .tok-namespace { color: light-dark(#085, #56b6c2); }
+  .tok-operator { color: light-dark(#a2f, #56b6c2); }
+  .tok-propertyName { color: light-dark(#05a, #e5c07b); }
+  .tok-variableName { color: light-dark(#000, #abb2bf); }
+  .tok-punctuation { color: light-dark(#000, #abb2bf); }
+}

package/src/core/codemirror/language/languages/python.ts

@@ -33,6 +33,7 @@ import { cellActionsState } from "../../cells/state";
 import { pythonCompletionSource } from "../../completion/completer";
 import type { PlaceholderType } from "../../config/types";
 import { FederatedLanguageServerClient } from "../../lsp/federated-lsp";
+import { createLspMarkdownRenderer } from "../../lsp/markdown-renderer";
 import { NotebookLanguageServerClient } from "../../lsp/notebook-lsp";
 import { createTransport } from "../../lsp/transports";
 import { CellDocumentUri, type ILanguageServerClient } from "../../lsp/types";
@@ -342,6 +343,7 @@ export class PythonLanguageAdapter implements LanguageAdapter<{}> {
             client: client as unknown as LanguageServerClient,
             languageId: "python",
             allowHTMLContent: true,
+            markdownRenderer: createLspMarkdownRenderer(),
             useSnippetOnCompletion: true,
             hoverConfig: hoverOptions,
             completionConfig: autocompleteOptions,

package/src/core/codemirror/lsp/__tests__/markdown-renderer.test.ts

@@ -0,0 +1,41 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { createLspMarkdownRenderer } from "../markdown-renderer";
+
+describe("createLspMarkdownRenderer", () => {
+  it("syntax-highlights python code blocks with tok-* span classes", () => {
+    const render = createLspMarkdownRenderer();
+    const result = render("```python\ndef foo():\n    pass\n```");
+    expect(result).toContain('class="language-python"');
+    expect(result).toContain("tok-keyword");
+    expect(result).toContain("<pre><code");
+  });
+
+  it("does not highlight non-python code blocks", () => {
+    const render = createLspMarkdownRenderer();
+    const result = render("```bash\necho hello\n```");
+    expect(result).not.toContain("tok-keyword");
+    expect(result).toContain("<code");
+  });
+
+  it("renders empty python code blocks as empty string", () => {
+    const render = createLspMarkdownRenderer();
+    const result = render("```python\n   \n```");
+    expect(result).toBe("");
+  });
+
+  it("renders markdown prose unchanged", () => {
+    const render = createLspMarkdownRenderer();
+    const result = render("## Examples\n\nSome text.");
+    expect(result).toContain("<h2");
+    expect(result).toContain("Examples");
+    expect(result).toContain("Some text.");
+  });
+
+  it("escapes HTML in highlighted code", () => {
+    const render = createLspMarkdownRenderer();
+    const result = render('```python\nx = "<div>"\n```');
+    expect(result).not.toContain("<div>");
+    expect(result).toContain("&lt;div&gt;");
+  });
+});

package/src/core/codemirror/lsp/markdown-renderer.ts

@@ -0,0 +1,59 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { classHighlighter, highlightCode } from "@lezer/highlight";
+import { parser as pythonParser } from "@lezer/python";
+import { marked } from "marked";
+
+/**
+ * Syntax-highlight a Python code string using the lezer Python parser.
+ * Returns an HTML string with tok-* span classes for styling.
+ */
+function highlightPython(code: string): string {
+  const tree = pythonParser.parse(code);
+  let html = "";
+  highlightCode(
+    code,
+    tree,
+    classHighlighter,
+    (text, classes) => {
+      const escaped = text
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+      html += classes ? `<span class="${classes}">${escaped}</span>` : escaped;
+    },
+    () => {
+      html += "\n";
+    },
+  );
+  return html;
+}
+
+/**
+ * A markdown renderer for LSP hover tooltips that adds syntax highlighting
+ * to Python code blocks using the lezer Python parser and classHighlighter.
+ * The tok-* CSS classes are defined in documentation.css.
+ */
+export function createLspMarkdownRenderer(): (markdown: string) => string {
+  const renderer = new marked.Renderer();
+  const prevCode = renderer.code.bind(renderer);
+
+  renderer.code = (token) => {
+    const { text, lang } = token;
+    if (!text.trim()) {
+      return "";
+    }
+    if (lang === "python" || lang === "py") {
+      const highlighted = highlightPython(text);
+      return `<pre><code class="language-python">${highlighted}</code></pre>\n`;
+    }
+    return prevCode(token);
+  };
+
+  return (markdown: string): string =>
+    marked(markdown, {
+      async: false,
+      gfm: true,
+      breaks: true,
+      renderer,
+    }) as string;
+}

package/dist/dist-0Fif7jnk.js

@@ -1,5 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import { i as pythonLanguage, n as localCompletionSource, r as python, t as globalCompletion } from "./dist-BotSqB48.js";
-export {
-  python
-};

package/dist/dist-B5h_9sHB.js

@@ -1,6 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import "./dist-DxvORzUR.js";
-import { n as sassCompletionSource, r as sassLanguage, t as sass } from "./dist-Bfwsv11D.js";
-export {
-  sass
-};

package/dist/dist-B9M6R5ye.js

@@ -1,5 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import { i as defineCSSCompletionSource, n as cssCompletionSource, r as cssLanguage, t as css } from "./dist-DxvORzUR.js";
-export {
-  css
-};

package/dist/dist-BCt3tnck.js

@@ -1,8 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import "./dist-CcXxepx6.js";
-import "./dist-DxvORzUR.js";
-import "./dist-DqAWR3CS.js";
-import { n as phpLanguage, t as php } from "./dist-Bde4a2kU.js";
-export {
-  php
-};

package/dist/dist-BUIJwMwn.js

@@ -1,8 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import "./dist-CcXxepx6.js";
-import "./dist-DxvORzUR.js";
-import "./dist-DqAWR3CS.js";
-import { i as liquidLanguage, n as liquid, r as liquidCompletionSource, t as closePercentBrace } from "./dist-4j4c7bjm.js";
-export {
-  liquid
-};

package/dist/dist-BpquMd3k.js

@@ -1,5 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import { n as jsonLanguage, t as json } from "./dist-h2c8sZvT.js";
-export {
-  json
-};

package/dist/dist-BzJsqYfz.js

@@ -1,5 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import { n as wastLanguage, t as wast } from "./dist-BbbIBDiQ.js";
-export {
-  wast
-};

package/dist/dist-CA5ELXAf.js

@@ -1,6 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import "./dist-DxvORzUR.js";
-import { n as lessCompletionSource, r as lessLanguage, t as less } from "./dist-luvabDEB.js";
-export {
-  less
-};

package/dist/dist-CLBRs6Uv.js

@@ -1,5 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import { n as rustLanguage, t as rust } from "./dist-D4CewLk6.js";
-export {
-  rust
-};

package/dist/dist-CStVCMbq.js

@@ -1,5 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import { n as cppLanguage, t as cpp } from "./dist-CLUtPrdy.js";
-export {
-  cpp
-};

package/dist/dist-CZRIEY3Y.js

@@ -1,8 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import "./dist-CcXxepx6.js";
-import "./dist-DxvORzUR.js";
-import "./dist-DqAWR3CS.js";
-import { i as jinjaLanguage, n as jinja, r as jinjaCompletionSource, t as closePercentBrace } from "./dist-B3pZ0Ab6.js";
-export {
-  jinja
-};

package/dist/dist-CuUHbFD0.js

@@ -1,5 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import { n as javaLanguage, t as java } from "./dist-DgnE8F-r.js";
-export {
-  java
-};

package/dist/dist-DV7Iabxb.js

@@ -1,8 +0,0 @@
-import "./dist-DNdhYsgW.js";
-import "./dist-CcXxepx6.js";
-import "./dist-DxvORzUR.js";
-import "./dist-DqAWR3CS.js";
-import { n as vueLanguage, t as vue } from "./dist-CLJWPTX2.js";
-export {
-  vue
-};