extra empty line was rendered with // highlight-end at end of code blocks

[coder-xiaomo]

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

extra empty line was rendered with // highlight-end at end of code blocks

Reproducible demo

No response

Steps to reproduce

try this markdown

```js
String foo = "bar"

// highlight-start
/...
这里可以写很多注释
甚至可以包含 // 行注释
或者 /** 块注释 */
// highlight-end
```

there will be an extra empty line at end of code blocks like this:

but if I set the end line in this style, the result is corrent:

```js
String foo = "bar"

// highlight-start
/...
这里可以写很多注释
甚至可以包含 // 行注释
// highlight-end
// highlight-next-line
或者 /** 块注释 */
```

Expected behavior

no extra line was rendered

Actual behavior

an extra line was rendered

Your environment

• Docusaurus version used: 3.7.0

Self-service

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

[slorber]

We have padding at the top or bottom of code blocks, although this is not visually the best, this is the current behavior. However it's not supposed to create a new line.

I'm not able to reproduce the case where it creates a new line, can you provide a runnable https://docusaurus.new repro please?

For me, both of your code blocks render exactly the same:

Do you have custom CSS or remark plugins that could cause trouble?

Can this be related to characters/encoding? Maybe try a simpler code block using non-chinese content.

[coder-xiaomo]

@slorber Oh! I think I found the reason.

I'm working on a Windows computer, so the default line break is CRLF (\r\n), not LF (\n).

On CodeSandbox or StackBlitz playgrounds, the line break is LF by default, so the problem does not occur unless you manually switch to CRLF in the lower-right bar and save the markdown file.

repro link: https://codesandbox.io/p/sandbox/wild-glitter-z3djmr (in this file: docs/intro.md)

using CRLF:

using LF:

[coder-xiaomo]

@slorber I found that in CodeBlockString component called parseLines function

docusaurus/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx

Lines 59 to 63 in c0f3755

	const {lineClassNames, code} = parseLines(children, {
	metastring,
	language,
	magicComments,
	});

the parseLines function was in codeBlockUtils.ts

docusaurus/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts

Line 244 in c0f3755

let code = content.replace(/\n$/, '');

maybe we need 👇to support CRLF?

let code = content.replace(/\r?\n$/, ''); 

---

a simple test case:

// .replace(/\n$/, '')
"\r\n123\r\n123\r\n".replace(/\n$/, '')     // result: '\r\n123\r\n123\r' (❌)
"\n123\n123\n".replace(/\n$/, '')           // result: '\n123\n123'

// .replace(/\n$/, '')
"\r\n123\r\n123\r\n".replace(/\r?\n$/, '')  // result: '\r\n123\r\n123' (✅)
"\n123\n123\n".replace(/\r?\n$/, '')        // result: '\n123\n123'

---

And here

docusaurus/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts

Line 269 in c0f3755

const lines = code.split('\n');

maybe we need

 const lines = code.split(/\r?\n/);

---

a simple test case:

// .split('\n')
"\r\n123\r\n123\r\n".split('\n')     // result: ['\r', '123\r', '123\r', ''] (❌)
"\n123\n123\n".split('\n')           // result: ['', '123', '123', '']

// .split(/\r?\n/)
"\r\n123\r\n123\r\n".split(/\r?\n/)  // result: ['', '123', '123', ''] (✅)
"\n123\n123\n".split(/\r?\n/)        // result: ['', '123', '123', '']