{showTree && (
<>
{/* Collapsed toggle */}
@@ -312,7 +312,7 @@ export function CodeContentWrapper({
)}
)}
-
+
{isBlobOrTree && (
;
-}
+"use client";
+
+import { useMemo } from "react";
+import "katex/dist/katex.min.css";
+import { ClientMarkdown } from "@/components/shared/client-markdown";
+import { HighlightedCodeBlock } from "@/components/shared/highlighted-code-block";
+import { cn } from "@/lib/utils";
-interface NotebookOutput {
+// Standard Jupyter Notebook JSON structure
+interface Output {
output_type: string;
- text?: string[] | string;
- data?: Record;
+ text?: string | string[];
+ data?: Record;
+ execution_count?: number | null;
ename?: string;
evalue?: string;
traceback?: string[];
- name?: string;
+}
+
+interface Cell {
+ cell_type: "markdown" | "code" | "raw";
+ execution_count?: number | null;
+ source: string | string[];
+ outputs?: Output[];
}
interface Notebook {
- cells: NotebookCell[];
+ cells: Cell[];
metadata?: {
- kernelspec?: { language?: string; display_name?: string };
- language_info?: { name?: string };
+ language_info?: { name: string };
};
}
-function joinSource(source: string[] | string): string {
- return Array.isArray(source) ? source.join("") : source;
+/**
+ * Jupyter MathJax is very forgiving, but standard remark-math is strict.
+ * This preprocessor cleans up common Jupyter math quirks before rendering.
+ */
+function preprocessJupyterMarkdown(source: string) {
+ let text = source;
+
+ // 1. Upgrade inline math ($...$) containing \tag{} to block math ($$...$$).
+ // KaTeX strictly forbids \tag{} in inline mode and will crash/fail to style it.
+ text = text.replace(/(^|[^$])\$([^$]+?\\tag\{[^}]+\}[^$]*?)\$([^$]|$)/g, "$1$$$$$2$$$$$3");
+
+ // 2. Wrap naked LaTeX environments (like \begin{equation}...\end{equation}) in $$...$$
+ // remark-math completely ignores these otherwise.
+ text = text.replace(
+ /(^|\n)(\\begin\{[a-zA-Z*]+\}[\s\S]*?\\end\{[a-zA-Z*]+\})(\n|$)/g,
+ "$1$$$$\n$2\n$$$$$3",
+ );
+
+ return text;
}
-function getOutputText(output: NotebookOutput): string {
- if (output.text) return joinSource(output.text);
- if (output.data) {
- if (output.data["text/plain"]) return joinSource(output.data["text/plain"]);
+export function NotebookViewer({ content }: { content: string }) {
+ const notebook = useMemo(() => {
+ try {
+ return JSON.parse(content);
+ } catch (e) {
+ console.error("Failed to parse Jupyter Notebook", e);
+ return null;
+ }
+ }, [content]);
+
+ if (!notebook) {
+ return (
+
+ Failed to parse Jupyter Notebook. The file might be corrupted.
+
+ );
}
- if (output.traceback) return output.traceback.join("\n");
- if (output.ename) return `${output.ename}: ${output.evalue || ""}`;
- return "";
-}
-function getOutputHtml(output: NotebookOutput): string | null {
- if (output.data?.["text/html"]) return joinSource(output.data["text/html"]);
- return null;
+ const language = notebook.metadata?.language_info?.name || "python";
+
+ return (
+ to be transparent and NOT establish a scroll context
+ "[&_.notebook-code_pre.shiki]:!p-0 [&_.notebook-code_pre.shiki]:!m-0 [&_.notebook-code_pre.shiki]:!bg-transparent [&_.notebook-code_pre.shiki]:!overflow-visible",
+ // 2. Syntax Highlighting map
+ "[&_.notebook-code_.shiki_span]:!text-[var(--shiki-light)] dark:[&_.notebook-code_.shiki_span]:!text-[var(--shiki-dark)]",
+ )}
+ >
+ {notebook.cells.map((cell, idx) => (
+
+ );
}
-function getOutputImage(output: NotebookOutput): { src: string; mime: string } | null {
- const data = output.data;
- if (!data) return null;
- for (const mime of ["image/png", "image/jpeg", "image/gif", "image/svg+xml"]) {
- if (data[mime]) {
- const raw = joinSource(data[mime]);
- if (mime === "image/svg+xml") {
- return {
- src: `data:${mime};utf8,${encodeURIComponent(raw)}`,
- mime,
- };
- }
- return { src: `data:${mime};base64,${raw.trim()}`, mime };
- }
+function NotebookCell({ cell, language }: { cell: Cell; language: string }) {
+ const rawSource = Array.isArray(cell.source) ? cell.source.join("") : cell.source;
+
+ if (cell.cell_type === "markdown") {
+ const processedSource = preprocessJupyterMarkdown(rawSource);
+ return (
+
+
+ {/* overflow-x-auto placed on the WRAPPER instead of the math element so tags don't break */}
+
+ );
}
- return null;
-}
-// Strip ANSI escape codes from terminal output
-function stripAnsi(str: string): string {
- // eslint-disable-next-line no-control-regex
- return str.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, "");
-}
+ if (cell.cell_type === "code") {
+ return (
+
+
+
+
+ );
+ }
-export interface RenderedCell {
- type: "code" | "markdown" | "raw";
- executionCount: number | null;
- sourceHtml: string;
- source: string;
- outputs: RenderedOutput[];
- markdownHtml?: string;
+ return null;
}
-export interface RenderedOutput {
- type: "text" | "html" | "image" | "error";
- content: string;
- mime?: string;
-}
+function NotebookOutput({ output }: { output: Output }) {
+ const isStream = output.output_type === "stream";
+ const isError = output.output_type === "error";
+ const isData =
+ output.output_type === "display_data" || output.output_type === "execute_result";
-export async function NotebookViewer({
- content,
- repoContext,
-}: {
- content: string;
- repoContext?: { owner: string; repo: string; branch: string; dir: string };
-}) {
- let notebook: Notebook;
- try {
- notebook = JSON.parse(content);
- } catch {
+ if (isStream) {
+ const text = Array.isArray(output.text) ? output.text.join("") : output.text;
return (
-
+
+
+ {cell.outputs && cell.outputs.length > 0 && (
+
+ {cell.execution_count
+ ? `In [${cell.execution_count}]:`
+ : "In [ ]:"}
+
+
+ {/* Strictly clamp down on scrollbars here */}
+
+
+
+
+ {cell.outputs.map((output, idx) => (
+
+ )}
+
-
- Invalid notebook format -
+
+
+
);
}
- if (!notebook.cells || !Array.isArray(notebook.cells)) {
+ if (isError) {
+ const traceback =
+ output.traceback?.join("\n") || `${output.ename}: ${output.evalue}`;
+ const cleanTraceback = traceback.replace(/\u001B\[[0-9;]*[a-zA-Z]/g, "");
return (
-
+
+ {text}
+
+
- (null);
useEffect(() => {
let cancelled = false;
- highlightCodeClient(code, lang, themeId).then((result) => {
- if (!cancelled) setHtml(result);
- });
+ (async () => {
+ try {
+ const highlighter = await getClientHighlighter();
+ const loaded = highlighter.getLoadedLanguages();
+ let effectiveLang = lang;
+ if (!loaded.includes(lang)) {
+ try {
+ await highlighter.loadLanguage(
+ lang as BundledLanguage,
+ );
+ } catch {
+ effectiveLang = "text";
+ if (!loaded.includes("text")) {
+ try {
+ await highlighter.loadLanguage(
+ "text" as BundledLanguage,
+ );
+ } catch {}
+ }
+ }
+ }
+ if (!cancelled) {
+ const result = highlighter.codeToHtml(code, {
+ lang: effectiveLang,
+ themes: {
+ light: "vitesse-light",
+ dark: "vitesse-black",
+ },
+ defaultColor: inlineColors ? "light-dark()" : false,
+ });
+ setHtml(result);
+ }
+ } catch {
+ // silently fall back to plain text
+ }
+ })();
return () => {
cancelled = true;
};
- }, [code, lang, themeId]);
+ }, [code, lang, inlineColors]);
if (html) {
- const parser = typeof window !== "undefined" ? new window.DOMParser() : null;
- let codeLines: string[] = [];
- if (parser) {
- const doc = parser.parseFromString(html, "text/html");
- const shiki = doc.querySelector(".shiki");
- if (shiki) {
- // Try to get .line spans
- const lineSpans = shiki.querySelectorAll(".line");
- if (lineSpans.length > 0) {
- codeLines = Array.from(lineSpans).map(
- (line) => line.innerHTML,
- );
- } else {
- // Fallback: split by
or by lines - codeLines = shiki.innerHTML.split( - /(?![^<]*<\/span>)/i,
- );
- }
- } else {
- // Fallback: split by \n
- codeLines = html.split(/\n/);
- }
- } else {
- codeLines = html.split(/\n/);
- }
-
- return (
-
- No cells found in notebook -
+
+
+
);
}
- const kernelLang =
- notebook.metadata?.language_info?.name ||
- notebook.metadata?.kernelspec?.language ||
- "python";
-
- const renderedCells: RenderedCell[] = await Promise.all(
- notebook.cells.map(async (cell) => {
- const source = joinSource(cell.source);
-
- if (cell.cell_type === "markdown") {
- const mdHtml = await renderMarkdownToHtml(source, repoContext);
- return {
- type: "markdown" as const,
- executionCount: null,
- sourceHtml: "",
- source,
- outputs: [],
- markdownHtml: mdHtml,
- };
- }
-
- // Code or raw cell — highlight source
- const lang = cell.cell_type === "code" ? kernelLang : "text";
- const sourceHtml = source.trim() ? await highlightCode(source, lang) : "";
-
- // Process outputs
- const outputs: RenderedOutput[] = [];
- for (const output of cell.outputs || []) {
- const img = getOutputImage(output);
- if (img) {
- outputs.push({
- type: "image",
- content: img.src,
- mime: img.mime,
- });
- continue;
- }
-
- const html = getOutputHtml(output);
- if (html) {
- outputs.push({ type: "html", content: html });
- continue;
- }
-
- if (output.output_type === "error" && output.traceback) {
- outputs.push({
- type: "error",
- content: stripAnsi(output.traceback.join("\n")),
- });
- continue;
- }
-
- const text = getOutputText(output);
- if (text) {
- outputs.push({ type: "text", content: stripAnsi(text) });
- }
- }
-
- return {
- type: cell.cell_type as "code" | "raw",
- executionCount: cell.execution_count ?? null,
- sourceHtml,
- source,
- outputs,
- };
- }),
- );
+ if (isData && output.data) {
+ const data = output.data;
+ const prompt = output.execution_count ? `Out[${output.execution_count}]:` : "";
- const kernelName = notebook.metadata?.kernelspec?.display_name || kernelLang;
+ return (
+
+
+ {cleanTraceback}
+
+
+
+ );
+ }
- return (
-
+ {prompt}
+
+
+ {data["image/png"] ? (
+ 
+ ) : data["image/jpeg"] ? (
+ 
+ ) : data["text/html"] ? (
+
+ ) : data["text/plain"] ? (
+
+
+ {Array.isArray(data["text/plain"])
+ ? data["text/plain"].join("")
+ : data["text/plain"]}
+
+ ) : null}
+ or by lines - codeLines = shiki.innerHTML.split( - /
-
- );
+ return ;
}
return (
-
- {codeLines.map((_, i) => (
-
-
- {i + 1}
-
- ))}
-
- {codeLines.map((line, i) => (
-
- ))}
-
- +);{code}