From 06bd44c693af9b1de704bb5a33cc8c1c1f4cefc0 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sat, 18 Dec 2021 13:32:30 +0800
Subject: [PATCH] feat(theme-common): stable classname for code blocks (#6125)

* feat(theme-common): stable classname for code blocks

* Remove extra lines

* Fix styles

* Remove line
---
 .../src/theme/CodeBlock/index.tsx                        | 8 +++++++-
 .../src/theme/CodeBlock/styles.module.css                | 9 ++++++++-
 .../docusaurus-theme-common/src/utils/ThemeClassNames.ts | 1 +
 website/docs/styling-layout.md                           | 1 +
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
index a616579e24..bf64313b6f 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -15,6 +15,7 @@ import {
   parseCodeBlockTitle,
   parseLanguage,
   parseLines,
+  ThemeClassNames,
 } from '@docusaurus/theme-common';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import type {Props} from '@theme/CodeBlock';
@@ -72,7 +73,12 @@ export default function CodeBlock({
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={clsx(styles.codeBlockContainer, blockClassName)}>
+        <div
+          className={clsx(
+            styles.codeBlockContainer,
+            blockClassName,
+            ThemeClassNames.common.codeBlock,
+          )}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
index eea58907f3..530aa14098 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -22,12 +22,19 @@
   font-size: var(--ifm-code-font-size);
   font-weight: 500;
   padding: 0.75rem var(--ifm-pre-padding);
+  border-top-left-radius: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
+}
+
+.codeBlockTitle + .codeBlockContent .codeBlock {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .codeBlock {
   margin: 0;
   padding: 0;
-  border-radius: 0;
+  border-radius: var(--ifm-global-radius);
 }
 
 .copyButton {
diff --git a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts
index 047b40be5c..2a6adc46a8 100644
--- a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts
+++ b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts
@@ -34,6 +34,7 @@ export const ThemeClassNames = {
     editThisPage: 'theme-edit-this-page',
     lastUpdated: 'theme-last-updated',
     backToTopButton: 'theme-back-to-top-button',
+    codeBlock: 'theme-code-block',
   },
   layout: {
     // TODO add other stable classNames here
diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md
index b50a860324..78c97828ef 100644
--- a/website/docs/styling-layout.md
+++ b/website/docs/styling-layout.md
@@ -114,6 +114,7 @@ import CodeBlock from '@theme/CodeBlock';
   {ThemeClassNamesCode
     // remove source comments
     .replace(/\/\*[\s\S]*?\*\/|\/\/.*/g,'')
+    .replace(/^ *\n/gm,'')
     .trim()}
 </CodeBlock>
 ```