fix(theme-classic): code block line number display with line wrapping (…

…#7910) * fix: line numbers display issue of code block * test: add dogfooding test page * chore: lint * test: move to code-block-tests
facebook · Aug 7, 2022 · d938ff7 · d938ff7
1 parent e1a8db7
commit d938ff7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css
@@ -35,6 +35,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   left: 0;
   padding: 0 var(--ifm-pre-padding);
   background: var(--ifm-pre-background);
+  overflow-wrap: normal;
 }
 
 .codeLineNumber::before {

diff --git a/website/_dogfooding/_pages tests/code-block-tests.mdx b/website/_dogfooding/_pages tests/code-block-tests.mdx
@@ -249,3 +249,21 @@ echo "short_initially_hidden_string"
 </Tabs>
 
 [// spell-checker:enable]: #
+
+```jsx showLineNumbers
+import React from 'react';
+import Layout from '@theme/Layout';
+
+export default function MyReactPage() {
+  return (
+    <Layout>
+      <h1>My React page</h1>
+      <p>
+        This is a React page. Let's make this sentence bit long. Some more words
+        to make sure... Some more words to make sure... Some more words to make
+        sure...
+      </p>
+    </Layout>
+  );
+}
+```