fix: use code snippet for code rendering

packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx

@@ -40,4 +40,17 @@ describe('<MarkdownContent />', () => {
       rendered.getByText('https://example.com', { selector: 'a' }),
     ).toBeInTheDocument();
   });
+
+  it('render MarkdownContent component with CodeSnippet for code blocks', async () => {
+    const rendered = await renderWithEffects(
+      wrapInTestApp(<MarkdownContent content="    jest(test: string);" />),
+    );
+    const fp1 = rendered.getByText('jest', { selector: 'span' });
+    expect(fp1).toBeInTheDocument();
+    expect(fp1.className).toEqual('hljs-function');
+    const fp2 = rendered.getByText('(test: string)', { selector: 'span' });
+    expect(fp2).toBeInTheDocument();
+    expect(fp2.className).toEqual('hljs-function');
+    expect(rendered.getByText(';', { selector: 'span' })).toBeInTheDocument();
+  });
 });

packages/core/src/components/MarkdownContent/MarkdownContent.tsx

@@ -19,6 +19,7 @@ import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import React from 'react';
 import { BackstageTheme } from '@backstage/theme';
+import { CodeSnippet } from '../CodeSnippet';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   markdown: {
@@ -49,15 +50,6 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
       backgroundColor: theme.palette.background.default,
     },
 
-    '& pre': {
-      padding: '16px',
-      overflow: 'auto',
-      fontSize: '85%',
-      lineHeight: 1.45,
-      backgroundColor: theme.palette.code.background,
-      borderRadius: '6px',
-      color: theme.palette.code.text,
-    },
     '& a': {
       color: theme.palette.link,
     },
@@ -75,6 +67,12 @@ type Props = {
   enableGfm?: boolean;
 };
 
+const renderers = {
+  code: ({ language, value }: { language: string; value: string }) => {
+    return <CodeSnippet language={language} text={value} />;
+  },
+};
+
 export const MarkdownContent = ({ content, enableGfm = false }: Props) => {
   const classes = useStyles();
   return (
@@ -82,6 +80,7 @@ export const MarkdownContent = ({ content, enableGfm = false }: Props) => {
       plugins={enableGfm ? [gfm] : []}
       className={classes.markdown}
       children={content}
+      renderers={renderers}
     />
   );
 };

packages/theme/src/themes.ts

@@ -48,10 +48,6 @@ export const lightTheme = createTheme({
       text: '#FFFFFF',
       link: '#000000',
     },
-    code: {
-      background: '#333333',
-      text: '#FFFFFF',
-    },
     border: '#E6E6E6',
     textContrast: '#000000',
     textVerySubtle: '#DDD',
@@ -114,10 +110,6 @@ export const darkTheme = createTheme({
       text: '#FFFFFF',
       link: '#000000',
     },
-    code: {
-      background: '#F8F8F8',
-      text: '#333333',
-    },
     border: '#E6E6E6',
     textContrast: '#FFFFFF',
     textVerySubtle: '#727272',

packages/theme/src/types.ts

@@ -69,10 +69,6 @@ type PaletteAdditions = {
     text: string;
     link: string;
   };
-  code: {
-    background: string;
-    text: string;
-  };
 };
 
 export type BackstagePalette = Palette & PaletteAdditions;

yarn.lock

@@ -19682,7 +19682,7 @@ react-markdown@^4.3.1:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
-react-markdown@^5.0.0:
+react-markdown@^5.0.0, react-markdown@^5.0.2:
   version "5.0.2"
   resolved "https://registry.npmjs.org/react-markdown/-/react-markdown-5.0.2.tgz#d15a8beb37b4ec34fc23dd892e7755eb7040b8db"
   integrity sha512-kmkB4JbV7LqkDAjvaKRKtodB3n3Id76/DalaDun1U8FuLB0SenPfvH+jAQ5Pcpo54cACRQc1LB1yXmuuuIVecw==