From 76854552f853fd0a1954dd3e7b3b990ac281a6b5 Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrey@okonet.dev>
Date: Fri, 6 May 2022 12:37:42 +0200
Subject: [PATCH 1/2] fix(components): Replace `code` with `div` to prevent
 PrismJS to highlight the code

Closes #18090
---
 lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index 92bd3bf6517..4eea05322bf 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -121,7 +121,7 @@ const Pre = styled.pre<PreProps>(({ theme, padded }) => ({
   padding: padded ? theme.layoutMargin : 0,
 }));
 
-const Code = styled.code({
+const Code = styled.div({
   flex: 1,
   paddingRight: 0,
   opacity: 1,

From ca2441260bdf2eaf29e6cf58d34bde60856ca7e9 Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrey@okonet.dev>
Date: Fri, 6 May 2022 16:21:44 +0200
Subject: [PATCH 2/2] Try to match styles and add code comment

---
 .../src/syntaxhighlighter/syntaxhighlighter.tsx  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index 4eea05322bf..ba338868ca4 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -102,11 +102,6 @@ const Scroller = styled(({ children, className }) => (
   {
     position: 'relative',
   },
-  ({ theme }) => ({
-    '& code': {
-      paddingRight: theme.layoutMargin,
-    },
-  }),
   ({ theme }) => themedSyntax(theme)
 );
 
@@ -121,11 +116,16 @@ const Pre = styled.pre<PreProps>(({ theme, padded }) => ({
   padding: padded ? theme.layoutMargin : 0,
 }));
 
-const Code = styled.div({
+/*
+We can't use `code` since PrismJS races for it.
+See https://github.com/storybookjs/storybook/issues/18090
+ */
+const Code = styled.div(({ theme }) => ({
   flex: 1,
-  paddingRight: 0,
+  paddingLeft: 2, // TODO: To match theming/global.ts for now
+  paddingRight: theme.layoutMargin,
   opacity: 1,
-});
+}));
 
 export interface SyntaxHighlighterState {
   copied: boolean;