use css to emulate code styling

jupyterlab · Jan 9, 2024 · 4325658 · 4325658
1 parent 017788d
commit 4325658
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/packages/jupyter-ai/src/components/rendermime-markdown.tsx b/packages/jupyter-ai/src/components/rendermime-markdown.tsx
@@ -17,7 +17,9 @@ export function RendermimeMarkdown(
       if (!ref.current) {
         return;
       }
+
       ref.current.innerHTML = '';
+      ref.current.className = 'custom-markdown'; // Apply the custom class
 
       const mimeType = 'text/markdown';
       const model = rmRegistry.createModel({

diff --git a/packages/jupyter-ai/style/base.css b/packages/jupyter-ai/style/base.css
@@ -7,3 +7,4 @@
 @import './expandable-text-field.css';
 @import './react-markdown.css';
 @import './chat-settings.css';
+@import './rendermime-markdown.css'
diff --git a/packages/jupyter-ai/style/rendermime-markdown.css b/packages/jupyter-ai/style/rendermime-markdown.css
@@ -0,0 +1,6 @@
+.custom-markdown pre,
+.custom-markdown pre > code {
+  background-color: var(--jp-cell-editor-background);
+  overflow-x: auto;
+  white-space: pre;
+}