From d938ff74309b61d0c5735c4848dd76d3e4fbf134 Mon Sep 17 00:00:00 2001
From: yzhe819 <68207314+yzhe819@users.noreply.github.com>
Date: Mon, 8 Aug 2022 03:01:31 +1200
Subject: [PATCH] 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
---
 .../src/theme/CodeBlock/Line/styles.module.css |  1 +
 .../_pages tests/code-block-tests.mdx          | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

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
index c769c64f403b..454874ff256d 100644
--- 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
index 44db91d49094..2c955e110cb4 100644
--- 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>
+  );
+}
+```