fix(theme-classic): code block line number display with line wrapping (facebook#7910)

yzhe819 · web-flow · commit d938ff74309b · 2022-08-07T23:01:31.000+08:00
* fix: line numbers display issue of code block

* test: add dogfooding test page

* chore: lint

* test: move to code-block-tests
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>
+  );
+}
+```

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus`
`35`	`35`	`left: 0;`
`36`	`36`	`padding: 0 var(--ifm-pre-padding);`
`37`	`37`	`background: var(--ifm-pre-background);`
	`38`	`+ overflow-wrap: normal;`
`38`	`39`	`}`
`39`	`40`
`40`	`41`	`.codeLineNumber::before {`