notebook-mdx
Version:
Jupyter Notebook support for MDX via Remark and Rehype plugins
747 lines (662 loc) • 33.6 kB
JavaScript
"use client";import e from"highlight.js";import t from"katex";import n from"react";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";e.configure({ignoreUnescapedHTML:!0,classPrefix:`hljs-`});const o=(t,n)=>{if(!e||!e.highlight)return t;try{if(n&&e.getLanguage(n))return e.highlight(t,{language:n}).value;{let n=e.highlightAuto(t);return n.value}}catch(e){return console.warn(`Highlight.js error:`,e),t}},s=({code:e})=>{let[t,r]=n.useState(!1),o=async()=>{try{await navigator.clipboard.writeText(e),r(!0),setTimeout(()=>r(!1),2e3)}catch(e){console.warn(`Failed to copy code:`,e)}};return i(`button`,{onClick:o,className:`jp-copy-button`,title:t?`Copied!`:`Copy code`,type:`button`,children:t?i(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:i(`polyline`,{points:`20,6 9,17 4,12`})}):a(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[i(`rect`,{x:`9`,y:`9`,width:`13`,height:`13`,rx:`2`,ry:`2`}),i(`path`,{d:`m5,15 0,-10 c0,-1.1 .9,-2 2,-2 l10,0`})]})})},c=e=>{if(!e)return;let t={python:`python`,py:`python`,javascript:`javascript`,js:`javascript`,typescript:`typescript`,ts:`typescript`,bash:`bash`,sh:`bash`,shell:`bash`,html:`html`,css:`css`,json:`json`,sql:`sql`,r:`r`,julia:`julia`,scala:`scala`,java:`java`,cpp:`cpp`,c:`c`,csharp:`csharp`,php:`php`,ruby:`ruby`,go:`go`,rust:`rust`,swift:`swift`,kotlin:`kotlin`,dart:`dart`,perl:`perl`,lua:`lua`,matlab:`matlab`,octave:`octave`,markdown:`markdown`,md:`markdown`,latex:`latex`,tex:`latex`,xml:`xml`,yaml:`yaml`,yml:`yaml`,toml:`toml`,ini:`ini`,dockerfile:`dockerfile`,makefile:`makefile`,raw:void 0};return t[e.toLowerCase()]||e.toLowerCase()},l=({content:e})=>i(`pre`,{children:i(`span`,{children:e})}),u=({content:e})=>{let r=n.useMemo(()=>{try{let n=e.replace(/^\$+|\$+$/g,``).replace(/^\\displaystyle\s*/,``),r=t.renderToString(n,{displayMode:!0,throwOnError:!1,errorColor:`#cc0000`,strict:!1});return{html:r,error:null}}catch(e){console.warn(`LaTeX rendering error:`,e);let t=e instanceof Error?e.message:`LaTeX rendering failed`;return{html:``,error:t}}},[e]);return r.error?a(`div`,{className:`notebook-output-latex-error`,children:[i(`pre`,{style:{background:`#fff5f5`,border:`1px solid #ff6b6b`,borderRadius:`4px`,padding:`10px`,color:`#d63031`},children:e}),a(`small`,{style:{color:`#cc0000`,display:`block`,marginTop:`5px`},children:[`LaTeX Error: `,r.error]})]}):i(`div`,{className:`notebook-output-latex`,dangerouslySetInnerHTML:{__html:r.html},style:{margin:`1em 0`,fontSize:`1.1em`}})},d=({data:e,config:t={},layout:r={}})=>{let o=n.useRef(null),[s,c]=n.useState(null),[l,u]=n.useState(null),[d,f]=n.useState(!0),[p,m]=n.useState(!1);return n.useEffect(()=>{typeof window<`u`&&typeof document<`u`&&m(!0)},[]),n.useEffect(()=>{if(!p)return;let e=async()=>{try{if(await new Promise(e=>setTimeout(e,100)),typeof window>`u`||typeof document>`u`)throw Error(`Browser environment not available`);let e;try{let t=await import(`plotly.js-dist-min`);e=t.default||t}catch(e){throw Error(`Could not load Plotly library: ${e?.message||`Unknown import error`}`)}if(!e)throw Error(`plotly.js-dist-min did not provide a Plotly object`);if(typeof e.newPlot!=`function`)throw Error(`plotly.js-dist-min did not provide a valid newPlot function`);c(e),u(null)}catch(e){let t=e instanceof Error?e.message:`Plotly library not available`;u(t)}finally{f(!1)}};e()},[p]),n.useEffect(()=>{if(!s||!o.current||!e)return;let n=async()=>{try{let n={displayModeBar:!0,displaylogo:!1,modeBarButtonsToRemove:[`pan2d`,`lasso2d`,`select2d`],responsive:!0,...t},i={autosize:!0,margin:{t:50,r:30,b:50,l:50},font:{size:12},...r,width:void 0,height:void 0};await s.newPlot(o.current,e,i,n),setTimeout(()=>{s&&o.current&&s.Plots.resize(o.current)},100)}catch(e){let t=e instanceof Error?e.message:`Failed to render chart`;u(t)}};n()},[s,e,r,t]),n.useEffect(()=>{if(!s||!o.current)return;let e=()=>{s&&o.current&&s.Plots.resize(o.current)};return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[s]),n.useEffect(()=>()=>{if(s&&o.current)try{s.purge(o.current)}catch{}},[s]),!p||d?i(`div`,{className:`notebook-output-plotly-loading`,children:a(`div`,{style:{padding:`20px`,textAlign:`center`,color:`#666`,border:`1px dashed #ccc`,borderRadius:`4px`,backgroundColor:`#f9f9f9`},children:[`📊 Loading interactive chart...`,i(`br`,{}),i(`small`,{children:`Plotly.js is loading`})]})}):l||!s?i(`div`,{className:`notebook-output-plotly-error`,children:a(`div`,{style:{padding:`20px`,border:`1px solid #ff9800`,borderRadius:`4px`,backgroundColor:`#fff3e0`,color:`#e65100`},children:[i(`strong`,{children:`📊 Interactive Chart Unavailable`}),i(`br`,{}),i(`small`,{children:l||`Plotly library not available`}),a(`details`,{style:{marginTop:`10px`},children:[i(`summary`,{style:{cursor:`pointer`,color:`#1976d2`},children:`View Raw Chart Data`}),i(`pre`,{style:{fontSize:`12px`,overflow:`auto`,maxHeight:`200px`,background:`#f5f5f5`,padding:`10px`,border:`1px solid #ddd`,borderRadius:`4px`,marginTop:`5px`},children:JSON.stringify({data:e,layout:r,config:t},null,2)})]})]})}):i(`div`,{className:`notebook-output-plotly`,style:{width:`100%`,maxWidth:`100%`,overflow:`hidden`,margin:`10px 0`,border:`1px solid #e0e0e0`,borderRadius:`4px`,backgroundColor:`#fff`},children:i(`div`,{ref:o,style:{width:`100%`,height:`400px`,minHeight:`300px`,maxHeight:`600px`,position:`relative`}})})},f=e=>{if(e.output_type===`stream`){let t=Array.isArray(e.text)?e.text.join(``):e.text;return i(`div`,{className:`jp-output-stream`,children:i(l,{content:t})})}if(e.output_type===`error`){let t=e=>e.replace(/\x1b\[[\d;]*m/g,``);return a(`div`,{className:`jp-output-error`,children:[a(`div`,{className:`jp-output-error-name`,children:[e.ename,`: `,e.evalue]}),e.traceback&&i(`pre`,{className:`jp-output-traceback`,children:e.traceback.map(t).join(`
`)})]})}if(e.output_type===`display_data`||e.output_type===`execute_result`){let t=e.data;if(!t)return null;let n=[],o=[`application/vnd.plotly.v1+json`,`text/html`,`image/svg+xml`,`image/png`,`image/jpeg`,`image/gif`,`text/markdown`,`text/latex`,`application/json`,`text/plain`],s=[`image/png`,`image/jpeg`,`image/gif`,`image/svg+xml`];for(let r of s)if(t[r]){let a=t[r],o=e.metadata?.[r];if(r===`image/svg+xml`){let e=Array.isArray(a)?a.join(``):a;n.push(i(`div`,{className:`notebook-output-image`,children:i(`div`,{dangerouslySetInnerHTML:{__html:e},style:{width:o?.width?`${o.width}px`:void 0,height:o?.height?`${o.height}px`:void 0,maxWidth:`100%`,textAlign:`center`}})},r))}else{let e=`data:${r};base64,${a}`;n.push(i(`div`,{className:`notebook-output-image`,children:i(`img`,{src:e,alt:`Notebook output`,style:{width:o?.width?`${o.width}px`:void 0,height:o?.height?`${o.height}px`:void 0,maxWidth:`100%`,display:`block`,margin:`0 auto`}})},r))}break}if(n.length===0){for(let e of o)if(t[e]){switch(e){case`application/vnd.plotly.v1+json`:try{let r=t[e];n.push(i(`div`,{className:`notebook-output-plotly`,children:i(d,{data:r.data||[],layout:r.layout||{},config:r.config||{}})},`plotly`))}catch(r){console.warn(`Error rendering Plotly data:`,r),n.push(a(`div`,{className:`notebook-output-json`,children:[i(`pre`,{children:`Plotly Chart (rendering failed)`}),a(`details`,{children:[i(`summary`,{children:`Raw Data`}),i(`pre`,{children:JSON.stringify(t[e],null,2)})]})]},`plotly-error`))}break;case`text/latex`:let r=Array.isArray(t[e])?t[e].join(``):t[e];n.push(i(`div`,{className:`notebook-output-latex`,children:i(u,{content:r})},`latex`));break;case`text/html`:let o=Array.isArray(t[e])?t[e].join(``):t[e];n.push(i(`div`,{className:`notebook-output-html`,children:i(`div`,{dangerouslySetInnerHTML:{__html:o}})},`html`));break;case`application/json`:n.push(i(`div`,{className:`notebook-output-json`,children:i(`pre`,{children:JSON.stringify(t[e],null,2)})},`json`));break;case`text/plain`:let s=Array.isArray(t[e])?t[e].join(``):t[e];n.push(i(`div`,{className:`notebook-output-text`,children:i(l,{content:s})},`text`));break;default:let c=Array.isArray(t[e])?t[e].join(``):t[e];n.push(i(`div`,{className:`notebook-output-text`,children:i(`pre`,{children:c})},e))}break}}return n.length>0?i(r,{children:n}):null}return null},p=({output:e,index:t})=>{let n=e.output_type===`execute_result`,r=e.output_type===`display_data`,o=e.output_type===`stream`,s=e.output_type===`error`;return a(`div`,{className:`jp-cell-output-wrapper`,children:[i(`div`,{className:`jp-cell-output-prompt`,children:n&&a(`div`,{className:`jp-output-prompt jp-output-execute-count`,children:[`Out[`,e.execution_count,`]:`]})}),i(`div`,{className:`jp-cell-output-area`,children:i(`div`,{className:`jp-cell-output-content`,children:f(e)})})]})},m=({source:e,outputs:t=[],executionCount:l,showLineNumbers:u=!1,language:d,showCopyButton:f=!0,showOutputs:m=!0,showLanguageIndicators:h=!1})=>{let g=Array.isArray(e)?e.join(``):e,_=c(d),v=n.useMemo(()=>o(g,_||void 0),[g,_]);return a(r,{children:[i(y,{}),a(`div`,{className:`jp-notebook-cell jp-code-cell`,children:[a(`div`,{className:`jp-cell-input-wrapper`,children:[i(`div`,{className:`jp-cell-input-prompt`,children:l?a(`div`,{className:`jp-input-prompt jp-input-execute-count`,children:[`In [`,l,`]:`]}):i(`div`,{className:`jp-input-prompt`,children:`In [ ]:`})}),i(`div`,{className:`jp-cell-input-area`,children:a(`div`,{className:`jp-cell-input-content`,children:[i(`pre`,{className:`jp-code-source`,children:i(`code`,{className:_?`language-${_}`:``,dangerouslySetInnerHTML:{__html:v},suppressHydrationWarning:!0})}),f&&i(s,{code:g}),d&&h&&i(`div`,{className:`jp-language-indicator`,children:d})]})})]}),t.length>0&&m&&i(`div`,{className:`jp-cell-outputs`,children:t.map((e,t)=>i(p,{output:e,index:t},t))})]})]})},h=({source:e})=>{let t=Array.isArray(e)?e.join(``):e,o=n.useMemo(()=>{let e=e=>e.replace(/\*\*(.*?)\*\*/g,`<strong>$1</strong>`).replace(/\*(.*?)\*/g,`<em>$1</em>`).replace(/`([^`]+)`/g,`<code>$1</code>`).replace(/!\[([^\]]*)\]\(([^)]*)\)/g,`<img alt="$1" src="$2" />`).replace(/\[([^\]]*)\]\(([^)]*)\)/g,`<a href="$2">$1</a>`),n=t.split(/\n{2,}/);return n.map(t=>{let n=t.trim();if(!n)return``;if(n.startsWith("```")){let e=n.replace(/^```[^\n]*\n?/,``).replace(/```$/,``);return`<pre><code>${e}</code></pre>`}if(n.startsWith(`### `))return`<h3>${e(n.slice(4))}</h3>`;if(n.startsWith(`## `))return`<h2>${e(n.slice(3))}</h2>`;if(n.startsWith(`# `))return`<h1>${e(n.slice(2))}</h1>`;if(n.startsWith(`> `))return`<blockquote>${e(n.slice(2))}</blockquote>`;let r=n.split(`
`).map(e).join(`<br>`);return`<p>${r}</p>`}).join(`
`)},[t]);return a(r,{children:[i(y,{}),i(`div`,{className:`jp-notebook-cell jp-markdown-cell`,children:a(`div`,{className:`jp-cell-input-wrapper`,children:[i(`div`,{className:`jp-cell-input-prompt`}),i(`div`,{className:`jp-cell-input-area`,children:i(`div`,{className:`jp-cell-input-content`,children:i(`div`,{className:`jp-markdown-content`,children:i(`div`,{dangerouslySetInnerHTML:{__html:o}})})})})]})})]})},g=(e,t)=>{if(!e||!e.trim())return Array.from({length:t},(e,t)=>t);let n=[],r=e.split(`,`).map(e=>e.trim());for(let e of r)if(e.includes(`-`)){let r=e.split(`-`).map(e=>e.trim());if(r.length!==2)continue;let[i,a]=r,o=parseInt(i,10)-1,s=parseInt(a,10)-1;if(!isNaN(o)&&!isNaN(s)&&o>=0&&s>=0&&o<=s)for(let e=o;e<=Math.min(s,t-1);e++)n.includes(e)||n.push(e)}else{let r=parseInt(e,10)-1;!isNaN(r)&&r>=0&&r<t&&!n.includes(r)&&n.push(r)}return n.sort((e,t)=>e-t)},_=(e,t)=>{if(e.metadata?.vscode?.languageId){let t=e.metadata.vscode.languageId;return e.cell_type===`raw`?`raw`:t}if(e.metadata?.languageId)return e.metadata.languageId;if(e.metadata?.language)return e.metadata.language;if(e.cell_type===`raw`)return`raw`;if(e.cell_type===`code`)return t},v=({notebookPath:e,showCellNumbers:t=!1,notebookData:o,notebookDataJson:s,showCopyButton:c=!0,cells:l,hideCode:u,showOutputs:d,showLanguageIndicators:f,...p})=>{let v=null,b=null;try{s?v=JSON.parse(s):o&&typeof o==`string`?v=JSON.parse(o):o&&typeof o==`object`?v=o:b=e?`Notebook loading from file system not implemented yet. Use notebookData prop instead.`:`No notebook path or data provided`}catch(e){b=`Failed to parse notebook JSON: ${e instanceof Error?e.message:`Unknown error`}`}if(b)return i(`div`,{className:`jp-notebook`,children:a(`div`,{style:{padding:`20px`,color:`#d84315`,border:`1px solid #ffcdd2`,borderRadius:`4px`,backgroundColor:`rgba(255, 205, 210, 0.1)`},children:[i(`strong`,{children:`Error loading notebook:`}),` `,b]})});if(!v||!v.cells||!Array.isArray(v.cells))return i(`div`,{className:`jp-notebook`,children:a(`div`,{style:{padding:`20px`,color:`#ff9800`,border:`1px solid #ffcc02`,borderRadius:`4px`,backgroundColor:`rgba(255, 204, 2, 0.1)`},children:[i(`strong`,{children:`Warning:`}),` No valid notebook data found or notebook has no cells.`]})});let x=n.useMemo(()=>v?.metadata?.kernelspec?.language||v?.metadata?.language_info?.name,[v?.metadata]),S=n.useMemo(()=>!l||!v?.cells?Array.from({length:v?.cells?.length||0},(e,t)=>t):g(l,v.cells.length),[l,v?.cells?.length]);return a(r,{children:[i(y,{}),i(`div`,{className:`jp-notebook`,children:S.map(e=>{let n=v?.cells?.[e];if(!n)return null;if(n.cell_type===`markdown`)return i(h,{source:n.source},e);if(n.cell_type===`code`&&!u){let r=_(n,x);return i(m,{source:n.source,outputs:n.outputs||[],executionCount:n.execution_count,showLineNumbers:t,language:r,showCopyButton:c,showOutputs:d,showLanguageIndicators:f},e)}else if(n.cell_type===`raw`&&!u){let r=_(n,x);return i(m,{source:n.source,outputs:[],executionCount:null,showLineNumbers:t,language:r,showCopyButton:c,showOutputs:d,showLanguageIndicators:f},e)}return null})})]})},y=()=>i(`style`,{id:`jupyter-notebook-styles`,children:`
/* Import KaTeX stylesheet */
@import url('https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css');
/* CSS Variables for authentic Jupyter theming */
:root {
--jp-border-width: 1px;
--jp-border-radius: 3px;
--jp-code-font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--jp-code-font-size: 13px;
--jp-code-line-height: 1.3077;
--jp-ui-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--jp-ui-font-size0: 11px;
--jp-ui-font-size1: 13px;
--jp-ui-font-size2: 14px;
--jp-ui-font-size3: 16px;
--jp-cell-padding: 5px;
--jp-cell-prompt-width: 64px;
--jp-cell-prompt-font-family: var(--jp-code-font-family);
--jp-cell-prompt-font-size: var(--jp-code-font-size);
--jp-cell-prompt-line-height: var(--jp-code-line-height);
--jp-input-prompt-color: #307FC1;
--jp-output-prompt-color: #D84315;
}
/* Main notebook container - inherit theme colors */
.jp-notebook {
font-family: var(--jp-ui-font-family);
font-size: var(--jp-ui-font-size1);
line-height: 1.5;
padding: 0;
margin: 0;
max-width: none;
border: none;
box-shadow: none;
/* Inherit colors from parent theme */
color: inherit;
background: transparent;
}
/* Individual cells - inherit theme colors */
.jp-notebook-cell {
display: block;
margin: 0 0 16px 0;
padding: 0;
border: none;
outline: none;
background: transparent;
position: relative;
border-left: var(--jp-border-width) solid transparent;
padding-left: var(--jp-cell-padding);
transition: border-color 0.2s ease;
/* Inherit text color from parent */
color: inherit;
}
.jp-notebook-cell:hover {
border-left-color: rgba(128, 128, 128, 0.3);
}
.jp-notebook-cell.jp-cell-selected {
border-left-color: #66afe9;
background: rgba(66, 175, 233, 0.02);
}
.jp-code-cell {
position: relative;
background: transparent;
color: inherit;
}
.jp-markdown-cell {
position: relative;
background: transparent;
color: inherit;
}
/* Cell input wrapper - inherit theme colors */
.jp-cell-input-wrapper {
display: flex;
align-items: flex-start;
background: transparent;
margin: 0;
padding: 0;
color: inherit;
}
/* Input prompts - keep authentic Jupyter colors */
.jp-cell-input-prompt {
flex: 0 0 64px;
color: inherit;
opacity: 0.6;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
padding: 4px 8px 4px 0;
text-align: right;
user-select: none;
min-height: 1.5em;
vertical-align: top;
background: transparent;
}
.jp-input-prompt {
color: var(--jp-input-prompt-color);
font-weight: bold;
background: transparent;
}
/* Code source styling - treat as single message unit per protocol */
.jp-code-source {
margin: 0 !important;
padding: 0 !important;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
white-space: pre-wrap;
word-wrap: break-word;
color: inherit;
background: transparent !important;
border: none !important;
outline: none !important;
resize: none;
overflow: visible;
display: block;
box-shadow: none !important;
}
/* Highlight.js theme - adaptive colors that work with light/dark themes */
.hljs {
color: inherit;
background: transparent;
}
.hljs-comment,
.hljs-quote {
color: #6a737d;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #d73a49;
font-weight: bold;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #22863a;
}
.hljs-literal {
color: #032f62;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
color: #032f62;
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #6f42c1;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #005cc5;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #6f42c1;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
/* Adjust colors for dark themes */
@media (prefers-color-scheme: dark) {
.hljs-comment,
.hljs-quote {
color: #8b949e;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #ff7b72;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #7ee787;
}
.hljs-literal {
color: #79c0ff;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
color: #a5d6ff;
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #d2a8ff;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #79c0ff;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #d2a8ff;
}
}
/* Override any theme CSS that might add line-level styling while preserving highlight.js classes */
.jp-code-source *:not(.hljs):not([class*="hljs-"]),
.jp-code-source > *:not(.hljs):not([class*="hljs-"]),
.jp-code-source span:not([class*="hljs-"]),
.jp-code-source div:not([class*="hljs-"]),
.jp-code-source .line:not([class*="hljs-"]),
.jp-code-source .token:not([class*="hljs-"]) {
color: inherit !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
white-space: inherit !important;
word-wrap: inherit !important;
display: inline !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none !important;
}
/* Ensure code element displays as block container */
.jp-code-source > code {
display: block !important;
width: 100% !important;
height: auto !important;
}
/* Kill any syntax highlighting that adds borders */
.jp-code-source .hljs,
.jp-code-source .highlight,
.jp-code-source .CodeMirror,
.jp-code-source .cm-editor {
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Message-level styling only on container */
.jp-cell-input-area {
flex: 1;
border: 1px solid rgba(128, 128, 128, 0.2);
border-radius: var(--jp-border-radius);
background: rgba(128, 128, 128, 0.05);
position: relative;
overflow: hidden; /* Prevent child elements from breaking out */
color: inherit;
}
.jp-cell-input-area:focus-within {
border-color: rgba(102, 175, 233, 0.5);
}
.jp-cell-input-content {
padding: 4px 8px;
overflow: visible;
background: transparent;
color: inherit;
position: relative;
}
/* Copy button in top right */
.jp-copy-button {
position: absolute;
top: 6px;
right: 8px;
width: 32px;
height: 32px;
border: 1px solid rgba(128, 128, 128, 0.3);
border-radius: 4px;
background: rgba(128, 128, 128, 0.1);
color: rgba(128, 128, 128, 0.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.2s ease;
z-index: 10;
font-size: 0;
line-height: 0;
}
.jp-copy-button:hover {
background: rgba(128, 128, 128, 0.2);
border-color: rgba(128, 128, 128, 0.5);
color: rgba(128, 128, 128, 1);
}
.jp-copy-button:focus {
outline: 2px solid rgba(66, 175, 233, 0.5);
outline-offset: 2px;
}
.jp-copy-button:active {
transform: scale(0.95);
}
/* Show copy button on hover of the input area */
.jp-cell-input-area:hover .jp-copy-button {
opacity: 1;
}
/* Always show copy button on touch devices */
@media (hover: none) and (pointer: coarse) {
.jp-copy-button {
opacity: 0.7;
}
}
/* Language indicator in bottom right */
.jp-language-indicator {
position: absolute;
bottom: 4px;
right: 8px;
font-size: 10px;
font-family: var(--jp-ui-font-family);
color: rgba(128, 128, 128, 0.7);
background: rgba(128, 128, 128, 0.1);
padding: 2px 6px;
border-radius: 2px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
pointer-events: none;
user-select: none;
}
/* Markdown content - inherit theme colors */
.jp-markdown-content {
font-family: var(--jp-ui-font-family);
font-size: var(--jp-ui-font-size2);
line-height: 1.6;
color: inherit;
padding: 6px 12px;
margin: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--jp-border-radius);
}
.jp-markdown-content h1,
.jp-markdown-content h2,
.jp-markdown-content h3,
.jp-markdown-content h4,
.jp-markdown-content h5,
.jp-markdown-content h6 {
color: inherit;
background: transparent;
}
.jp-markdown-content h1 {
font-size: 2em;
margin: 0.67em 0;
font-weight: bold;
}
.jp-markdown-content h2 {
font-size: 1.5em;
margin: 0.75em 0;
font-weight: bold;
}
.jp-markdown-content h3 {
font-size: 1.17em;
margin: 0.83em 0;
font-weight: bold;
}
.jp-markdown-content p {
margin: 1em 0;
color: inherit;
background: transparent;
}
.jp-markdown-content code {
background: rgba(128, 128, 128, 0.1);
color: inherit;
font-family: var(--jp-code-font-family);
font-size: calc(var(--jp-code-font-size) - 1px);
padding: 1px 4px;
border-radius: 2px;
}
.jp-markdown-content pre {
background: rgba(128, 128, 128, 0.05);
color: inherit;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
padding: 8px 12px;
border-radius: var(--jp-border-radius);
overflow-x: auto;
white-space: pre-wrap;
margin: 1em 0;
}
/* Cell outputs - inherit theme colors */
.jp-cell-outputs {
margin-top: 4px;
background: transparent;
color: inherit;
}
.jp-cell-output-wrapper {
display: flex;
align-items: flex-start;
margin: 2px 0;
background: transparent;
color: inherit;
}
/* Output prompts - keep authentic Jupyter colors */
.jp-cell-output-prompt {
flex: 0 0 64px;
color: inherit;
opacity: 0.6;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
padding: 4px 8px 4px 0;
text-align: right;
user-select: none;
min-height: 1.5em;
vertical-align: top;
background: transparent;
}
.jp-output-prompt {
color: var(--jp-output-prompt-color);
font-weight: bold;
background: transparent;
}
/* Output area - subtle styling that adapts to theme */
.jp-cell-output-area {
flex: 1;
border: 1px solid rgba(128, 128, 128, 0.2);
border-radius: var(--jp-border-radius);
background: transparent;
overflow: hidden;
position: relative;
color: inherit;
}
.jp-cell-output-content {
padding: 4px 8px;
overflow-x: auto;
background: transparent;
color: inherit;
}
/* Stream output - inherit theme colors */
.jp-output-stream pre {
margin: 0;
padding: 0;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
white-space: pre-wrap;
word-wrap: break-word;
color: inherit;
background: transparent;
}
/* Error output - use red color but adapt to theme */
.jp-output-error {
color: #d32f2f;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
background: transparent;
}
.jp-output-error-name {
font-weight: bold;
margin-bottom: 4px;
color: #d32f2f;
background: transparent;
}
.jp-output-traceback {
margin: 0;
padding: 8px;
background: rgba(211, 47, 47, 0.1);
border: 1px solid rgba(211, 47, 47, 0.3);
border-radius: var(--jp-border-radius);
white-space: pre-wrap;
overflow-x: auto;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
color: #d32f2f;
}
/* Image output */
.notebook-output-image {
text-align: center;
margin: 4px 0;
padding: 4px;
background: transparent;
}
.notebook-output-image img {
max-width: 100%;
height: auto;
border-radius: var(--jp-border-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Text output - inherit theme colors */
.notebook-output-text pre {
margin: 0;
padding: 0;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
white-space: pre-wrap;
word-wrap: break-word;
color: inherit;
background: transparent;
}
/* Stream output - inherit theme colors */
.jp-output-stream pre {
margin: 0;
padding: 0;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
white-space: pre-wrap;
word-wrap: break-word;
color: inherit;
background: transparent;
}
/* HTML output - inherit theme colors */
.notebook-output-html {
margin: 4px 0;
font-family: var(--jp-ui-font-family);
font-size: var(--jp-ui-font-size2);
line-height: 1.6;
color: inherit;
background: transparent;
}
/* JSON output - subtle background that adapts to theme */
.notebook-output-json pre {
margin: 0;
padding: 8px;
font-family: var(--jp-code-font-family);
font-size: var(--jp-code-font-size);
line-height: var(--jp-code-line-height);
background: rgba(128, 128, 128, 0.05);
border: 1px solid rgba(128, 128, 128, 0.2);
border-radius: var(--jp-border-radius);
overflow-x: auto;
white-space: pre-wrap;
color: inherit;
}
/* LaTeX output */
.notebook-output-latex {
font-family: var(--jp-code-font-family);
font-size: 1.1em;
line-height: 1.6;
color: inherit;
background: transparent;
text-align: center;
margin: 1em 0;
}
.notebook-output-latex-error {
color: #cc0000;
font-family: var(--jp-code-font-family);
font-size: 1em;
line-height: 1.6;
background: transparent;
padding: 8px;
border: 1px solid #ffcdd2;
border-radius: 4px;
margin: 1em 0;
}
/* Plotly output */
.notebook-output-plotly {
width: 100%;
height: 400px;
margin: 1em 0;
}
.notebook-output-plotly-error {
color: #cc0000;
font-family: var(--jp-code-font-family);
font-size: 1em;
line-height: 1.6;
background: #fff5f5;
padding: 20px;
border: 1px solid #ffcdd2;
border-radius: 4px;
margin: 1em 0;
}
.notebook-output-plotly-loading {
color: #666;
font-family: var(--jp-ui-font-family);
font-size: var(--jp-ui-font-size1);
line-height: 1.5;
padding: 20px;
text-align: center;
background: transparent;
}
/* Loading and error states - inherit theme colors */
.jp-notebook-loading,
.jp-notebook-error {
padding: 16px;
text-align: center;
color: inherit;
opacity: 0.6;
font-style: italic;
font-family: var(--jp-ui-font-family);
font-size: var(--jp-ui-font-size1);
background: transparent;
}
.jp-notebook-error {
color: #d32f2f;
background: rgba(211, 47, 47, 0.1);
border: 1px solid rgba(211, 47, 47, 0.3);
border-radius: var(--jp-border-radius);
}
/* Responsive design */
@media (max-width: 768px) {
.jp-notebook {
font-size: var(--jp-ui-font-size0);
}
.jp-cell-input-prompt,
.jp-cell-output-prompt {
flex: 0 0 48px;
font-size: calc(var(--jp-code-font-size) - 1px);
}
}
/* Print styles */
@media print {
.jp-notebook {
font-size: 11pt;
color: #000000;
background: #ffffff;
}
.jp-cell-input-prompt,
.jp-cell-output-prompt {
font-size: 10pt;
color: #666666;
}
.jp-cell-input-area,
.jp-cell-output-area {
border: 1px solid #ccc;
break-inside: avoid;
background: #ffffff;
}
.jp-notebook-cell {
break-inside: avoid;
page-break-inside: avoid;
color: #000000;
}
}
`});export{m as NotebookCodeCell,v as NotebookLoader,h as NotebookMarkdownCell,y as NotebookStyles};
//# sourceMappingURL=client-BzwLShz8.js.map