From d76b4659755b9d5e987a7a0efa2d184e1c4de0dc Mon Sep 17 00:00:00 2001
From: Jesko Steinberg <jesko.steinberg@sda.se>
Date: Fri, 30 Oct 2020 14:25:03 +0100
Subject: [PATCH] fix: use code snippet for code rendering

---
 .../MarkdownContent/MarkdownContent.test.tsx    | 13 +++++++++++++
 .../MarkdownContent/MarkdownContent.tsx         | 17 ++++++++---------
 packages/theme/src/themes.ts                    |  8 --------
 packages/theme/src/types.ts                     |  4 ----
 yarn.lock                                       |  2 +-
 5 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx
index a96525a3f6..2fb40d2f4f 100644
--- a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx
+++ b/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();
+  });
 });
diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx
index baa3f45862..4f234565d2 100644
--- a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx
+++ b/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}
     />
   );
 };
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index 48142d48b9..5b233ac303 100644
--- a/packages/theme/src/themes.ts
+++ b/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',
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index c87c5c26f4..5acc0f75e9 100644
--- a/packages/theme/src/types.ts
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
index 80d96ad134..3615ad7f7d 100644
--- a/yarn.lock
+++ b/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==