Add Jupyter Notebook (.ipynb) Rendering Support

modules/markup/external/external.go

@@ -48,6 +48,11 @@ func RegisterRenderers() {
 		},
 	})
 
+	markup.RegisterRenderer(&frontendRenderer{
+		name:     "jupyter-notebook",
+		patterns: []string{"*.ipynb"},
+	})
+
 	for _, renderer := range setting.ExternalMarkupRenderers {
 		markup.RegisterRenderer(&Renderer{renderer})
 	}

package.json

@@ -52,6 +52,7 @@
     "jquery": "4.0.0",
     "js-yaml": "4.1.1",
     "katex": "0.16.45",
+    "marked": "18.0.2",
     "mermaid": "11.14.0",
     "online-3d-viewer": "0.18.0",
     "pdfobject": "2.3.1",

tests/e2e/jupyter-render.test.ts

@@ -0,0 +1,62 @@
+import {env} from 'node:process';
+import {expect, test} from '@playwright/test';
+import {login, apiCreateRepo, apiCreateFile, assertNoJsError, randomString} from './utils.ts';
+
+test.describe('jupyter notebook rendering', () => {
+  let repoName: string;
+  let owner: string;
+
+  test.beforeAll(async ({request}) => {
+    repoName = `e2e-jupyter-${randomString(8)}`;
+    owner = env.GITEA_TEST_E2E_USER;
+
+    await apiCreateRepo(request, {name: repoName});
+
+    // Single comprehensive test notebook
+    const notebook = JSON.stringify({
+      cells: [
+        {cell_type: 'markdown', source: ['# Header 1\n', '## Header 2\n', '**bold** *italic* `code`\n', '- List item 1\n', '- List item 2\n', '[link](https://example.com)\n', '| Col1 | Col2 |\n', '|------|------|\n', '| A | B |\n', '```python\ncode block\n```\n', '> blockquote\n', '~~strikethrough~~']},
+        {cell_type: 'code', execution_count: 1, source: ['print("Hello")'], outputs: [{output_type: 'stream', name: 'stdout', text: ['Hello\n']}]},
+        {cell_type: 'code', execution_count: 2, source: ['x'], outputs: [{output_type: 'execute_result', data: {'image/png': 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='}}]},
+        {cell_type: 'code', source: ['# No output'], outputs: []},
+        {cell_type: 'code', source: ['err'], outputs: [{output_type: 'error', ename: 'ValueError', evalue: 'Test', traceback: ['ValueError: Test']}]},
+        {cell_type: 'code', source: ['mixed'], outputs: [{output_type: 'stream', name: 'stdout', text: ['text\n']}, {output_type: 'execute_result', data: {'text/html': ['<b>HTML</b>']}}]},
+      ],
+      metadata: {}, nbformat: 4, nbformat_minor: 5,
+    });
+
+    await apiCreateFile(request, owner, repoName, 'test.ipynb', notebook);
+  });
+
+  test('renders markdown cells', async ({page}) => {
+    await login(page);
+    await page.goto(`/${owner}/${repoName}/src/branch/main/test.ipynb`);
+    await assertNoJsError(page);
+    const frame = page.frameLocator('iframe.external-render-iframe');
+    await expect(frame.locator('.cell.markdown h1')).toBeVisible();
+    await expect(frame.locator('.cell.markdown strong')).toBeVisible();
+    await expect(frame.locator('.cell.markdown ul li').first()).toBeVisible();
+    await expect(frame.locator('.cell.markdown table')).toBeVisible();
+  });
+
+  test('renders code cells with outputs', async ({page}) => {
+    await login(page);
+    await page.goto(`/${owner}/${repoName}/src/branch/main/test.ipynb`);
+    await assertNoJsError(page);
+    await expect(page.frameLocator('iframe.external-render-iframe').locator('.cell.code .output pre').first()).toBeVisible();
+  });
+
+  test('renders image outputs', async ({page}) => {
+    await login(page);
+    await page.goto(`/${owner}/${repoName}/src/branch/main/test.ipynb`);
+    await assertNoJsError(page);
+    await expect(page.frameLocator('iframe.external-render-iframe').locator('.cell.code .output img')).toBeVisible();
+  });
+
+  test('renders error outputs', async ({page}) => {
+    await login(page);
+    await page.goto(`/${owner}/${repoName}/src/branch/main/test.ipynb`);
+    await assertNoJsError(page);
+    await expect(page.frameLocator('iframe.external-render-iframe').locator('.error-output')).toBeVisible();
+  });
+});

web_src/css/features/jupyter.css

@@ -0,0 +1,192 @@
+/* Gitea styles for Jupyter notebook content */
+.jupyter-notebook {
+  padding: 20px;
+  background: var(--color-body);
+  color: var(--color-text);
+  font-family: inherit;
+}
+
+/* Cell containers */
+.jupyter-notebook .cell {
+  margin-bottom: 20px;
+}
+
+/* Markdown cells */
+.jupyter-notebook .cell.markdown {
+  background: var(--color-body);
+  border: none;
+}
+
+.jupyter-notebook .cell.markdown .input {
+  padding: 6px 12px;
+  line-height: 1.6;
+  background: var(--color-body);
+  color: var(--color-text);
+  margin-left: 110px;
+}
+
+.jupyter-notebook .cell.markdown h1,
+.jupyter-notebook .cell.markdown h2,
+.jupyter-notebook .cell.markdown h3 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.25;
+  color: var(--color-text);
+}
+
+.jupyter-notebook .cell.markdown h1 {
+  font-size: 1.875em;
+  border-bottom: 1px solid var(--color-secondary-alpha-20);
+  padding-bottom: 0.3em;
+}
+
+.jupyter-notebook .cell.markdown h2 {
+  font-size: 1.5em;
+}
+
+.jupyter-notebook .cell.markdown h3 {
+  font-size: 1.25em;
+}
+
+.jupyter-notebook .cell.markdown p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.jupyter-notebook .cell.markdown code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: var(--color-secondary-alpha-20);
+  border-radius: 3px;
+  font-family: var(--fonts-monospace);
+}
+
+.jupyter-notebook .cell.markdown table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 16px 0;
+  font-size: 13px;
+}
+
+.jupyter-notebook .cell.markdown table th,
+.jupyter-notebook .cell.markdown table td {
+  border: 1px solid var(--color-secondary);
+  padding: 6px 13px;
+  text-align: left;
+}
+
+.jupyter-notebook .cell.markdown table th {
+  background: var(--color-secondary-alpha-20);
+  font-weight: var(--font-weight-semibold);
+}
+
+.jupyter-notebook .cell.markdown table tr:nth-child(even) {
+  background: var(--color-secondary-alpha-10);
+}
+
+/* Code cells */
+.jupyter-notebook .cell.code {
+  background: transparent;
+  border: none;
+}
+
+.jupyter-notebook .cell.code .input-wrapper,
+.jupyter-notebook .cell.code .output-wrapper {
+  display: flex;
+  align-items: flex-start;
+}
+
+.jupyter-notebook .cell.code .prompt {
+  padding: 10px 10px 10px 0;
+  color: var(--color-text-light-2);
+  font-family: var(--fonts-monospace);
+  font-size: 13px;
+  white-space: nowrap;
+  user-select: none;
+  text-align: right;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.jupyter-notebook .cell.code .input {
+  flex: 1;
+  background-color: var(--color-code-bg, #f6f8fa);
+  border: 1px solid var(--color-secondary-alpha-20, #d0d7de);
+  border-radius: 4px;
+  min-height: 40px;
+}
+
+.jupyter-notebook .cell.code .input pre {
+  margin: 0;
+  padding: 10px 16px;
+  font-family: var(--fonts-monospace, monospace);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-x: auto;
+  color: var(--color-text);
+  background: transparent;
+}
+
+.jupyter-notebook .cell.code .input code {
+  display: block;
+  font-family: inherit;
+}
+
+/* Code outputs */
+.jupyter-notebook .cell.code .output {
+  flex: 1;
+  background: var(--color-body);
+  color: var(--color-text);
+  overflow-x: auto;
+  min-width: 0;
+}
+
+.jupyter-notebook .cell.code .output pre {
+  margin: 0;
+  padding: 10px 16px;
+  font-family: var(--fonts-monospace);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-x: auto;
+  color: var(--color-text);
+  background: var(--color-body);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.jupyter-notebook .cell.code .output table {
+  border-collapse: collapse;
+  margin: 10px 16px;
+  font-size: 13px;
+  max-width: 100%;
+}
+
+.jupyter-notebook .cell.code .output table th,
+.jupyter-notebook .cell.code .output table td {
+  border: 1px solid var(--color-secondary);
+  padding: 6px 13px;
+  text-align: left;
+}
+
+.jupyter-notebook .cell.code .output table th {
+  background: var(--color-secondary-alpha-20);
+  font-weight: var(--font-weight-semibold);
+}
+
+.jupyter-notebook .cell.code .output table tr:nth-child(even) {
+  background: var(--color-secondary-alpha-10);
+}
+
+.jupyter-notebook .cell.code .output img {
+  max-width: 90%;
+  height: auto;
+  display: block;
+  margin: 10px 0;
+}
+
+.jupyter-notebook .cell.code .output table img {
+  margin: 0;
+  width: auto;
+}

web_src/js/external-render-frontend.ts

@@ -8,6 +8,7 @@ type LazyLoadFunc = () => Promise<{frontendRender: FrontendRenderFunc}>;
 const frontendPlugins: Record<string, LazyLoadFunc> = {
   'viewer-3d': () => import('./render/plugins/frontend-viewer-3d.ts'),
   'openapi-swagger': () => import('./render/plugins/frontend-openapi-swagger.ts'),
+  'jupyter-notebook': () => import('./render/plugins/frontend-jupyter-notebook.ts'),
 };
 
 class Options implements FrontendRenderOptions {