diff --git a/main.go b/main.go index 80b8a51d4a4..0a3d0164fa2 100644 --- a/main.go +++ b/main.go @@ -17,6 +17,7 @@ import ( // register supported doc types _ "gitea.dev/modules/markup/console" _ "gitea.dev/modules/markup/csv" + _ "gitea.dev/modules/markup/jupyter" _ "gitea.dev/modules/markup/markdown" _ "gitea.dev/modules/markup/orgmode" diff --git a/modules/htmlutil/html.go b/modules/htmlutil/html.go index 5db1d6404ad..a480826bc61 100644 --- a/modules/htmlutil/html.go +++ b/modules/htmlutil/html.go @@ -4,6 +4,7 @@ package htmlutil import ( + "errors" "fmt" "html/template" "io" @@ -88,6 +89,52 @@ func EscapeString(s string) template.HTML { return template.HTML(template.HTMLEscapeString(s)) } +type HTMLWriter interface { + OriginWriter() io.Writer + WriteString(s string) HTMLWriter + WriteHTML(s template.HTML) HTMLWriter + WriteFormat(fmt template.HTML, args ...any) HTMLWriter + Err() error +} + +type htmlWriter struct { + w io.Writer + errs []error +} + +func (h *htmlWriter) OriginWriter() io.Writer { + return h.w +} + +func (h *htmlWriter) WriteString(s string) HTMLWriter { + if _, err := io.WriteString(h.w, template.HTMLEscapeString(s)); err != nil { + h.errs = append(h.errs, err) + } + return h +} + +func (h *htmlWriter) WriteHTML(s template.HTML) HTMLWriter { + if _, err := io.WriteString(h.w, string(s)); err != nil { + h.errs = append(h.errs, err) + } + return h +} + +func (h *htmlWriter) WriteFormat(fmt template.HTML, args ...any) HTMLWriter { + if _, err := HTMLPrintf(h.w, fmt, args...); err != nil { + h.errs = append(h.errs, err) + } + return h +} + +func (h *htmlWriter) Err() error { + return errors.Join(h.errs...) +} + +func NewHTMLWriter(w io.Writer) HTMLWriter { + return &htmlWriter{w: w} +} + type HTMLBuilder struct { sb strings.Builder } diff --git a/modules/htmlutil/html_test.go b/modules/htmlutil/html_test.go index a1ab0a6a49b..88e4935a1df 100644 --- a/modules/htmlutil/html_test.go +++ b/modules/htmlutil/html_test.go @@ -5,6 +5,7 @@ package htmlutil import ( "html/template" + "strings" "testing" "github.com/stretchr/testify/assert" @@ -29,3 +30,11 @@ func TestHTMLBuilder(t *testing.T) { assert.Equal(t, "<
>>", b.String()) assert.Equal(t, template.HTML("<
>>"), b.HTMLString()) } + +func TestHTMLWriter(t *testing.T) { + sb := new(strings.Builder) + w := NewHTMLWriter(sb) + w.WriteString("<").WriteHTML("
").WriteFormat("%s%s", ">", EscapeString(">")) + assert.Equal(t, "<
>>", sb.String()) + assert.NoError(t, w.Err()) +} diff --git a/modules/markup/jupyter/jupyter-test.ipynb b/modules/markup/jupyter/jupyter-test.ipynb new file mode 100644 index 00000000000..1bb45f99584 --- /dev/null +++ b/modules/markup/jupyter/jupyter-test.ipynb @@ -0,0 +1,74 @@ +{ + "metadata": {}, + "nbformat": 4, + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "source": ["print('very-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong')"], + "outputs": [ + { + "output_type": "execute_result", + "text": ["very-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ...\n"] + }, + { + "output_type": "stream", + "name": "stdout", + "text": ["stdout 1 ...\n", "stdout 2 ...\n"] + }, + { + "output_type": "stream", + "name": "stderr", + "text": ["stderr ...\n"] + }, + { + "data": { + "text/plain": ["data text 1\n", "data text 2\n"] + } + }, + { + "data": { + "text/plain": true + } + }, + { + "data": { + "image/svg+xml": [""] + } + }, + { + "data": { + "text/html": "HTML Link" + } + }, + { + "data": { + "text/latex": "$$a=1$$" + } + }, + { + "data": { + "text/plain": "plain text" + } + }, + { + "output_type": "error", + "ename": "Error Name", + "traceback": ["stacktrace 1", "stacktrace 2"] + } + ] + }, + { + "cell_type": "unknown-cell" + }, + { + "cell_type": "markdown", + "source": [ + "# h1\n", "## h2\n", "### h3\n", "\n", "paragraph 1\n", "\n", + "very-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong\n", + "- list item 1\n", "- list item 2\n", "\n", "```python\n", "print('code block')\n", "```\n", + "
th1th2
td1td2
\n" + ] + } + ] +} diff --git a/modules/markup/jupyter/jupyter.go b/modules/markup/jupyter/jupyter.go new file mode 100644 index 00000000000..059046c1365 --- /dev/null +++ b/modules/markup/jupyter/jupyter.go @@ -0,0 +1,393 @@ +// Copyright 2026 The Gitea Authors. All rights reserved. +// SPDX-License-Identifier: MIT + +package jupyter + +import ( + "encoding/base64" + "fmt" + "io" + "strings" + "sync" + + "gitea.dev/modules/highlight" + "gitea.dev/modules/htmlutil" + "gitea.dev/modules/json" + "gitea.dev/modules/log" + "gitea.dev/modules/markup" + "gitea.dev/modules/markup/markdown" + "gitea.dev/modules/setting" + "gitea.dev/modules/util" +) + +func init() { + markup.RegisterRenderer(renderer{}) +} + +// Renderer implements markup.Renderer for Jupyter notebooks +type renderer struct{} + +var ( + _ markup.Renderer = (*renderer)(nil) + _ markup.PostProcessRenderer = (*renderer)(nil) + _ markup.ExternalRenderer = (*renderer)(nil) // FIXME: this is not an external render, need to refactor the framework in the future +) + +type mimeHandler struct { + Mime string + Fn func(w htmlutil.HTMLWriter, data string) error +} + +func renderCellCodeOutputTextPlain(w htmlutil.HTMLWriter, text string) error { + w.WriteFormat(`
%s
`, text) + return w.Err() +} + +func renderCellCodeOutputUnsupported(w htmlutil.HTMLWriter, message string) error { + w.WriteFormat(`
%s
`, message) + return w.Err() +} + +var dataMimeHandlers = sync.OnceValue(func() []mimeHandler { + renderImage := func(w htmlutil.HTMLWriter, subtype, payload string) error { + w.WriteFormat(`
`, subtype, payload) + return w.Err() + } + renderUnsupportedOutput := func(message string) func(htmlutil.HTMLWriter, string) error { + return func(w htmlutil.HTMLWriter, _ string) error { + return renderCellCodeOutputUnsupported(w, message) + } + } + return []mimeHandler{ + // Images (PNG, JPEG, SVG) + {"image/png", func(w htmlutil.HTMLWriter, d string) error { + return renderImage(w, "png", d) + }}, + {"image/jpeg", func(w htmlutil.HTMLWriter, d string) error { + return renderImage(w, "jpeg", d) + }}, + {"image/svg+xml", func(w htmlutil.HTMLWriter, d string) error { + return renderImage(w, "svg+xml", base64.StdEncoding.EncodeToString(util.UnsafeStringToBytes(d))) + }}, + + // Rich & Math Layouts + {"text/html", func(w htmlutil.HTMLWriter, d string) error { + // To future developers: don't allow custom CSS classes or attributes, + // because ".link-action" or "data-fetch-xxx" can send POST requests and lead to XSS. + // If you'd really like to support more, do remember to correctly sanitize the values. + w.WriteFormat(`
%s
`, markup.Sanitize(d)) + return w.Err() + }}, + {"text/latex", func(w htmlutil.HTMLWriter, d string) error { + w.WriteFormat(`
%s
`, trimMathDelimiters(d)) + return w.Err() + }}, + {"text/plain", renderCellCodeOutputTextPlain}, + + // Security Placeholders + {"application/javascript", renderUnsupportedOutput("[JavaScript output - execution disabled for security]")}, + {"application/vnd.plotly.v1+json", renderUnsupportedOutput("[Plotly output - interactive plots not supported]")}, + {"application/vnd.jupyter.widget-view+json", renderUnsupportedOutput("[Jupyter widget - interactive widgets not supported]")}, + } +}) + +func (renderer) Name() string { + return "jupyter-render" +} + +func (renderer) NeedPostProcess() bool { return true } + +func (renderer) GetExternalRendererOptions() markup.ExternalRendererOptions { + return markup.ExternalRendererOptions{ + // HINT: no need to let markup render sanitize the output because there are many special CSS class names, inline attributes. + // This render must guarantee that the output is safe and no XSS + SanitizerDisabled: true, + } +} + +func (renderer) FileNamePatterns() []string { + return []string{"*.ipynb"} +} + +func (renderer) SanitizerRules() []setting.MarkupSanitizerRule { + return nil +} + +// Notebook structures +type Notebook struct { + Cells []Cell `json:"cells"` + Metadata map[string]any `json:"metadata"` + Nbformat int `json:"nbformat"` +} + +type Cell struct { + CellType string `json:"cell_type"` + Source any `json:"source"` // string or []string + Outputs []Output `json:"outputs,omitempty"` + ExecutionCount any `json:"execution_count,omitempty"` // int or null + Metadata map[string]any `json:"metadata,omitempty"` +} + +type Output struct { + OutputType string `json:"output_type"` + Data map[string]any `json:"data,omitempty"` + Text any `json:"text,omitempty"` // string or []string + Name string `json:"name,omitempty"` + Traceback any `json:"traceback,omitempty"` // []string + Ename string `json:"ename,omitempty"` + Evalue string `json:"evalue,omitempty"` +} + +// Render renders Jupyter notebook to HTML +func (renderer) Render(ctx *markup.RenderContext, input io.Reader, outputWriter io.Writer) error { + htmlWriter := htmlutil.NewHTMLWriter(outputWriter) + // the size is (should be) checked and/or limited by the caller to avoid OOM + var notebook Notebook + if err := json.NewDecoder(input).Decode(¬ebook); err != nil { + htmlWriter.WriteFormat(`
Failed to parse notebook JSON: %v
`, err) + return htmlWriter.Err() + } + + // Check nbformat version + if notebook.Nbformat < 4 { + htmlWriter.WriteFormat( + `
This notebook uses an older format (nbformat %d). Only nbformat 4+ is supported for rendering. Please upgrade the notebook in Jupyter or view the raw JSON.
`, + notebook.Nbformat, + ) + return htmlWriter.Err() + } + + // Detect language + language := "python" // default + if metadata, ok := notebook.Metadata["language_info"].(map[string]any); ok { + if name, ok := metadata["name"].(string); ok { + language = name + } + } else if kernelSpec, ok := notebook.Metadata["kernelspec"].(map[string]any); ok { + if lang, ok := kernelSpec["language"].(string); ok { + language = lang + } + } + + // Start rendering + htmlWriter.WriteHTML(`
`) + + // limiting the cell rendering to 100 cells + cells := notebook.Cells + truncated := false + const maxRenderedCells = 100 + + if len(cells) > maxRenderedCells { + cells = cells[:maxRenderedCells] // Slice down to exactly 100 elements instantly at the pointer layer + truncated = true + } + + for _, cell := range cells { + if err := renderCell(ctx, htmlWriter, cell, language); err != nil { + log.Warn("Failed to render cell: %v", err) // TODO: RENDER-LOG-HANDLING: see other comments + continue + } + } + + if truncated { + htmlWriter.WriteHTML(`
`) + htmlWriter.WriteHTML(`Output truncated. This notebook contains too many cells to display efficiently.`) + htmlWriter.WriteHTML(`
`) + } + + htmlWriter.WriteHTML(`
`) + return htmlWriter.Err() +} + +func renderCellCode(output htmlutil.HTMLWriter, cell Cell, language string) error { + source := joinSource(cell.Source) + var executionCount *int64 + if cell.ExecutionCount != nil { + if count, err := util.ToInt64(cell.ExecutionCount); err == nil { + executionCount = &count + } + } + + output.WriteHTML(`
`) + { + if executionCount != nil { + output.WriteFormat(`
In [%d]:
`, *executionCount) + } else { + output.WriteHTML(`
In [ ]:
`) + } + + // Highlight code + lexer := highlight.DetectChromaLexerByFileName("", language) + output.WriteFormat(`
`, strings.ToLower(language))
+		output.WriteHTML(highlight.RenderCodeByLexer(lexer, source))
+		output.WriteHTML("
") + } + output.WriteHTML(`
`) + + // Render outputs + if len(cell.Outputs) > 0 { + hasExecutionResult := false + for _, out := range cell.Outputs { + if out.OutputType == "execute_result" { + hasExecutionResult = true + break + } + } + + output.WriteHTML(`
`) + { + if hasExecutionResult && executionCount != nil { + output.WriteFormat(`
Out [%d]:
`, *executionCount) + } else { + output.WriteHTML(`
`) + } + + output.WriteHTML(`
`) + for _, out := range cell.Outputs { + renderCellCodeOutput(output, out) + } + output.WriteHTML(`
`) + } + output.WriteHTML(`
`) + } + + return output.Err() +} + +func renderCell(ctx *markup.RenderContext, output htmlutil.HTMLWriter, cell Cell, language string) error { + switch cell.CellType { + case "markdown": + output.WriteHTML(` +
+
+
+
`) + if err := renderCellMarkdown(ctx, output, joinSource(cell.Source)); err != nil { + return err + } + output.WriteHTML(`
`) + case "code": + output.WriteHTML(`
`) + if err := renderCellCode(output, cell, language); err != nil { + return err + } + output.WriteHTML(`
`) + default: + output.WriteFormat(` +
+
+
Cell:
+
[Cell type %s - unsupported, skipped]
+
+
`, cell.CellType) + } + return output.Err() +} + +func renderCellMarkdown(rctx *markup.RenderContext, output htmlutil.HTMLWriter, source string) error { + markdownCtx := markup.NewRenderContext(rctx) + // make sure the markdown render use the same options and helper to generate correct contents (e.g.: links) + markdownCtx.RenderOptions = rctx.RenderOptions + markdownCtx.RenderHelper = rctx.RenderHelper + output.WriteHTML(`
`) + if err := markdown.Render(markdownCtx, strings.NewReader(source), output.OriginWriter()); err != nil { + return err + } + output.WriteHTML(`
`) + return output.Err() +} + +func renderCellCodeOutput(output htmlutil.HTMLWriter, out Output) { + if out.Data != nil { + // Iterate through our priority list to find the best matching MIME handler available + for _, h := range dataMimeHandlers() { + if rawPayload, exists := out.Data[h.Mime]; exists { + var stringPayload string + + // Flatten the polymorphic JSON input (string or []any) into a single clean string + switch v := rawPayload.(type) { + case string: + stringPayload = v + case []any: + stringPayload = joinSource(v) + default: + _ = renderCellCodeOutputUnsupported(output, fmt.Sprintf("[Data output - unsupported data type %T for mime type %s]", rawPayload, h.Mime)) + continue + } + + if err := h.Fn(output, stringPayload); err != nil { + // TODO: RENDER-LOG-HANDLING: outputting render's error to sever's log is not a proper approach + // The errors can be: + // * unsupported element (cell, data, etc): it should render the message on the UI to tell users that the content is not supported, or ignore them if they are ignore-able + // * logic error: it should report to server logs + // * network error: io.Writer tries to write to the HTTP connection, so the error can also be a network error, such error should be ignored + log.Error("Jupyter rendering engine failed for MIME type %s: %v", h.Mime, err) + } + + // Return immediately after rendering the top matching priority format + return + } + } + } + + // Stream output + if out.OutputType == "stream" && out.Text != nil { + streamName := util.Iif(out.Name == "stderr", "stderr", "stdout") + output.WriteFormat(`
%s
`, streamName, joinSource(out.Text)) + return + } + + // Error output + if out.OutputType == "error" { + traceback := "" + if tb, ok := out.Traceback.([]any); ok { + lines := make([]string, len(tb)) + for i, line := range tb { + lines[i] = fmt.Sprint(line) + } + traceback = strings.Join(lines, "\n") + } + if traceback == "" && out.Ename != "" { + traceback = fmt.Sprintf("%s: %s", out.Ename, out.Evalue) + } + output.WriteFormat(`
%s
`, traceback) + return + } + + // Generic text output + if out.Text != nil { + _ = renderCellCodeOutputTextPlain(output, joinSource(out.Text)) + } +} + +func joinSource(source any) string { + switch v := source.(type) { + case nil: + return "" + case string: + return v + case []any: + // the "source slice item" has EOL ("\n"), so just join them together + parts := make([]string, len(v)) + for i, part := range v { + parts[i] = fmt.Sprint(part) + } + return strings.Join(parts, "") + default: + return fmt.Sprint(v) + } +} + +// trimMathDelimiters strips a single pair of surrounding math delimiters ("$$...$$" or "$...$"), +// so the inner expression is handled by the math post-processor. Unlike strings.Trim, it does not +// eat unrelated "$" characters elsewhere in multi-expression content. +func trimMathDelimiters(s string) string { + s = strings.TrimSpace(s) + if t, ok := strings.CutPrefix(s, "$$"); ok { + return strings.TrimSuffix(t, "$$") + } + if t, ok := strings.CutPrefix(s, "$"); ok { + return strings.TrimSuffix(t, "$") + } + return s +} diff --git a/modules/markup/jupyter/jupyter_test.go b/modules/markup/jupyter/jupyter_test.go new file mode 100644 index 00000000000..fd1464d1727 --- /dev/null +++ b/modules/markup/jupyter/jupyter_test.go @@ -0,0 +1,314 @@ +// Copyright 2026 The Gitea Authors. All rights reserved. +// SPDX-License-Identifier: MIT + +package jupyter + +import ( + "fmt" + "strings" + "testing" + + "gitea.dev/modules/markup" + "gitea.dev/modules/test" + + "github.com/stretchr/testify/assert" +) + +func TestRender(t *testing.T) { + r := renderer{} + + t.Run("Basic notebook", func(t *testing.T) { + input := `{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "source": ["print('hello')"], + "outputs": [ + { + "output_type": "stream", + "name": "stdout", + "text": ["hello\n"] + } + ] + } + ], + "metadata": {}, + "nbformat": 4 + }` + + var output strings.Builder + ctx := &markup.RenderContext{} + err := r.Render(ctx, strings.NewReader(input), &output) + + assert.NoError(t, err) + result := output.String() + assert.Contains(t, result, `
`) + assert.Contains(t, result, `
`) + assert.Contains(t, result, `In [1]:`) + assert.Contains(t, result, `print`) + assert.Contains(t, result, `hello`) + assert.Contains(t, result, `stream-stdout`) + }) + + t.Run("Markdown cell with XSS Protection", func(t *testing.T) { + input := `{ + "cells": [ + { + "cell_type": "markdown", + "source": [ + "# Title\n", + "Some text\n", + "[click me](javascript:alert(1))\n", + "" + ] + } + ], + "metadata": {}, + "nbformat": 4 + }` + + var output strings.Builder + ctx := markup.NewRenderContext(t.Context()) + err := r.Render(ctx, strings.NewReader(input), &output) + + assert.NoError(t, err) + result := output.String() + + // Assert normal markup still renders correctly + assert.Contains(t, result, `
`) + assert.Contains(t, result, `Title`) + assert.Contains(t, result, `Some text`) + assert.Contains(t, result, `click me`) + + // CRITICAL SECURITY ASSERTIONS: Ensure XSS vectors are completely stripped + assert.NotContains(t, result, `javascript:alert`) + assert.NotContains(t, result, `
Safe Content
" + ] + }, + "metadata": {} + } + ] + } + ] + }` + + var output strings.Builder + ctx := markup.NewRenderContext(t.Context()) + ctx.RenderOptions.MarkupType = "jupyter-render" + err := markup.Render(ctx, strings.NewReader(maliciousNotebook), &output) + assert.NoError(t, err) + const expected = ` +
+
+
+
In [1]:
+
+

+					a=1
+				
+
+
+
+
Out [1]:
+
+
+
Safe Content
+
+
+
+
+
` + assert.Equal(t, test.NormalizeHTMLSpaces(expected), test.NormalizeHTMLSpaces(output.String())) +} diff --git a/modules/test/utils.go b/modules/test/utils.go index 5a4e13b4232..12b35f42f7a 100644 --- a/modules/test/utils.go +++ b/modules/test/utils.go @@ -12,12 +12,16 @@ import ( "net/http" "net/http/httptest" "os" + "regexp" + "slices" "strconv" "strings" "sync" "gitea.dev/modules/json" "gitea.dev/modules/util" + + "golang.org/x/net/html" ) // RedirectURL returns the redirect URL of a http response. @@ -182,3 +186,48 @@ func ExternalServiceHTTP(t TestingT, envVarName, def string) string { } return val } + +var normalizeHTMLSpacesRegexp = sync.OnceValue(func() (ret struct { + afterRt, beforeLt *regexp.Regexp +}, +) { + ret.afterRt = regexp.MustCompile(`>\s*`) + ret.beforeLt = regexp.MustCompile(`\s*<`) + return ret +}) + +func NormalizeHTMLSpaces(s string) string { + vars := normalizeHTMLSpacesRegexp() + s = vars.afterRt.ReplaceAllString(s, ">\n") + s = vars.beforeLt.ReplaceAllString(s, "\n<") + return strings.TrimSpace(s) +} + +func NormalizeHTMLAttributes(t TestingT, s string) string { + nodes, err := html.Parse(strings.NewReader(s)) + if err != nil { + t.Errorf("failed to parse expected HTML: %v", err) + return "" + } + + var normalize func(n *html.Node) + normalize = func(n *html.Node) { + slices.SortFunc(n.Attr, func(a, b html.Attribute) int { + if cmp := strings.Compare(a.Namespace, b.Namespace); cmp != 0 { + return cmp + } + if cmp := strings.Compare(a.Key, b.Key); cmp != 0 { + return cmp + } + return strings.Compare(a.Val, b.Val) + }) + for c := n.FirstChild; c != nil; c = c.NextSibling { + normalize(c) + } + } + var sb strings.Builder + if err = html.Render(&sb, nodes); err != nil { + t.Errorf("failed to render HTML: %v", err) + } + return sb.String() +} diff --git a/tests/integration/html_helper.go b/tests/integration/html_helper.go index cefe5592c4a..fc900e5a3de 100644 --- a/tests/integration/html_helper.go +++ b/tests/integration/html_helper.go @@ -5,13 +5,12 @@ package integration import ( "io" - "slices" - "strings" "testing" + "gitea.dev/modules/test" + "github.com/PuerkitoBio/goquery" "github.com/stretchr/testify/assert" - "golang.org/x/net/html" ) // HTMLDoc struct @@ -53,36 +52,10 @@ func AssertHTMLElement[T int | bool](t testing.TB, doc *HTMLDoc, selector string func assertHTMLEq(t testing.TB, expected, actual string) { t.Helper() - if expected == actual { + if expected == actual { // fast path return } - exp, err := html.Parse(strings.NewReader(expected)) - if !assert.NoError(t, err) { - return - } - act, err := html.Parse(strings.NewReader(actual)) - if !assert.NoError(t, err) { - return - } - var normalize func(n *html.Node) - normalize = func(n *html.Node) { - slices.SortFunc(n.Attr, func(a, b html.Attribute) int { - if cmp := strings.Compare(a.Namespace, b.Namespace); cmp != 0 { - return cmp - } - if cmp := strings.Compare(a.Key, b.Key); cmp != 0 { - return cmp - } - return strings.Compare(a.Val, b.Val) - }) - for c := n.FirstChild; c != nil; c = c.NextSibling { - normalize(c) - } - } - normalize(exp) - normalize(act) - var expNormalized, actNormalized strings.Builder - assert.NoError(t, html.Render(&expNormalized, exp)) - assert.NoError(t, html.Render(&actNormalized, act)) - assert.Equal(t, expNormalized.String(), actNormalized.String()) + exp := test.NormalizeHTMLAttributes(t, expected) + act := test.NormalizeHTMLAttributes(t, actual) + assert.Equal(t, exp, act) } diff --git a/web_src/css/index.css b/web_src/css/index.css index 2d3e118825d..71e58e7c8ec 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -52,6 +52,7 @@ @import "./markup/content.css"; @import "./markup/codeblock.css"; @import "./markup/codepreview.css"; +@import "./markup/jupyter.css"; @import "./font_i18n.css"; @import "./base.css"; diff --git a/web_src/css/markup/jupyter.css b/web_src/css/markup/jupyter.css new file mode 100644 index 00000000000..ab128e64a77 --- /dev/null +++ b/web_src/css/markup/jupyter.css @@ -0,0 +1,93 @@ +.markup.jupyter-render { + padding: 0; +} + +.markup .jupyter-notebook { + padding: 20px; + background: var(--color-body); + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + font-family: var(--fonts-monospace); + display: flex; + flex-direction: column; + gap: 2em; +} + +/* cell code */ +.markup .jupyter-notebook .cell-line { + display: flex; + width: 100%; + gap: 0.5em; +} + +.markup .jupyter-notebook .cell-left { + width: 100px; + flex-shrink: 0; +} + +.markup .jupyter-notebook .cell-right { + flex: 1; +} + +.markup .jupyter-notebook .cell-prompt { + padding: 10px 0; + color: var(--color-text-light-2); + font-size: 13px; +} + +.markup .jupyter-notebook .cell-left.cell-prompt { + padding-left: 10px; + text-align: right; + white-space: nowrap; + user-select: none; +} + +.markup .jupyter-notebook .cell-right.cell-prompt { + padding-right: 10px; +} + +.markup .jupyter-notebook .cell-input, +.markup .jupyter-notebook .cell-output { + overflow-x: auto; +} + +.markup .jupyter-notebook .cell-input pre, +.markup .jupyter-notebook .cell-output pre { + padding: 10px 16px; + font-size: 13px; + min-height: 40px; + margin: 0; +} + +.markup .jupyter-notebook .cell-input pre { + background-color: var(--color-code-bg); + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +.markup .jupyter-notebook .cell-output { + display: flex; + flex-direction: column; + gap: 1em; +} + +.markup .jupyter-notebook .cell-type-code { + display: flex; + flex-direction: column; + gap: 1em; +} + +.markup .jupyter-notebook .cell-output-unsupported { + color: var(--color-text-light-2); + font-style: italic; + font-size: 13px; +} + +.markup .jupyter-notebook .cell-output-error { + color: var(--color-red); +} + +/* cell markdown */ +.markup .jupyter-notebook .cell-right .embedded-markdown { + padding: 0 16px; /* match cell code right padding */ +}