Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When we pass the showLineNumbers prop to code block, and we toggle the word wrap button (the code block must have at least one line wider than the code block width), the line numbers are not consistent. Also there are some unintended line breaks when word wrap is on.

Reproducible demo

No response

Steps to reproduce

1. Initialize new docusaurus project:

npx --yes create-docusaurus@latest website classic

2. Let's make one of the code block lines long. Say docs/tutorial-basics/create-a-page.md:

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...</p>
    </Layout>
  );
}

3. Please also include showLineNumbers prop to the code block. Serve the website and go to http://localhost:3000/docs/tutorial-basics/create-a-page

Word wrap off:

Word wrap on:

Expected behavior

Line numbers should be consistent. No changes to line numbers. Unnecessary line breaks for lines narrower than the code block width.

Actual behavior

Inconsistent line numbers after the wrapped line. Also there are line breaks for lines narrower than the code block width.

Your environment

• Docusaurus version used: 2.0.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Safari 15.6, Node.js 16.16.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 12.5

Self-service

• I'd be willing to fix this bug myself.