tweak font styles for code blocks in chat (#148)

jupyterlab · May 6, 2023 · 76278de · 76278de
1 parent 5ec8cab
commit 76278de
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/jupyter-ai/src/components/chat-code-view.tsx b/packages/jupyter-ai/src/components/chat-code-view.tsx
@@ -4,6 +4,7 @@ import type { CodeProps } from 'react-markdown/lib/ast-to-react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { duotoneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Box, Button } from '@mui/material';
+import cx from 'clsx';
 
 type ChatCodeViewProps = CodeProps;
 
@@ -13,13 +14,15 @@ type ChatCodeBlockProps = ChatCodeViewProps & {
   language?: string;
 };
 
+const JPAI_CODE_CLASS = 'jp-ai-code';
+
 function ChatCodeInline({
   className,
   children,
   ...props
 }: ChatCodeInlineProps) {
   return (
-    <code {...props} className={className}>
+    <code {...props} className={cx(JPAI_CODE_CLASS, className)}>
       {children}
     </code>
   );
@@ -59,6 +62,7 @@ function ChatCodeBlock({ language, children, ...props }: ChatCodeBlockProps) {
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       <SyntaxHighlighter
         {...props}
+        className={cx(props.className, JPAI_CODE_CLASS)}
         children={value}
         style={duotoneLight}
         language={language}

diff --git a/packages/jupyter-ai/style/react-markdown.css b/packages/jupyter-ai/style/react-markdown.css
@@ -1,7 +1,14 @@
 .jp-RenderedHTMLCommon.jp-ai-react-markdown > pre {
-    margin: 0px;
+  margin: 0;
 }
 
 .jp-RenderedHTMLCommon.jp-ai-react-markdown {
-    padding: 0px;
-}
+  padding: 0;
+}
+
+/* !important specifier required to override inline styles from Prism */
+.jp-ai-code {
+  font-family: var(--jp-code-font-family) !important;
+  font-size: var(--jp-code-font-size) !important;
+  line-height: var(--jp-code-line-height) !important;
+}