rename main-docs-wrapper to docs-wrapper

facebook · Apr 15, 2021 · 7edc9cb · 7edc9cb
1 parent cd47d8a
commit 7edc9cb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 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
@@ -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
@@ -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
@@ -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}