From 7edc9cb753618c71e2023fd97e1350a78b20c773 Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Thu, 15 Apr 2021 18:40:14 +0200
Subject: [PATCH] rename main-docs-wrapper to docs-wrapper

---
 .../src/theme/DocPage/styles.module.css                    | 2 +-
 .../docusaurus-theme-common/src/utils/ThemeClassNames.ts   | 2 +-
 website/docs/styling-layout.md                             | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
index f5511946c72f..19bfa5fc993c 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
@@ -9,7 +9,7 @@
   --doc-sidebar-width: 300px;
 }
 
-:global(.main-docs-wrapper) {
+:global(.docs-wrapper) {
   display: flex;
 }
 
diff --git a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts
index 8f545f7380d9..c4a3f9b090d0 100644
--- a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts
+++ b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts
@@ -18,7 +18,7 @@ export const ThemeClassNames = {
   wrapper: {
     main: 'main-wrapper',
     blogPages: 'blog-wrapper',
-    docPages: 'main-docs-wrapper',
+    docPages: 'docs-wrapper',
     mdxPages: 'mdx-wrapper',
   },
 };
diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md
index aadc18c3c9bc..388bc3bad34f 100644
--- a/website/docs/styling-layout.md
+++ b/website/docs/styling-layout.md
@@ -105,13 +105,18 @@ function MyComponent() {
 
 We provide some predefined CSS class names to provide access for developers to style layout of a page globally in Docusaurus. The purpose is to have stable classnames shared by all themes that are meant to be targeted by custom CSS.
 
-import ThemeClassNamesCode from '!!raw-loader!@site/../packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts'; import CodeBlock from '@theme/CodeBlock';
+```mdx-code-block
+import ThemeClassNamesCode from '!!raw-loader!@site/../packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts';
+
+import CodeBlock from '@theme/CodeBlock';
 
 <CodeBlock className="language-ts">
   {ThemeClassNamesCode
+    // remove source comments
     .replace(/\/\*[\s\S]*?\*\/|\/\/.*/g,'')
     .trim()}
 </CodeBlock>
+```
 
 ### CSS modules {#css-modules}