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

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

* Remove extra lines

* Fix styles

* Remove line

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}

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 {

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

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>
 ```