Tutorial extra empty line bug

[Kyle-Ye]

Description

Extra line is render for code in tutorial.

Checklist

• If possible, I've reproduced the issue using the main branch of this package.
• This issue hasn't been addressed in an existing GitHub issue.

Expected Behavior

Show the correct highlighting for Line 25-29

{
  "content": [...],
  "fileName": "CustomizedSlothView.swift",
  "fileType": "swift",
  "highlights": [
    {
      "line": 25
    },
    {
      "line": 26
    },
    {
      "line": 27
    },
    {
      "line": 28
    },
    {
      "line": 29
    }
  ],
  "identifier": "01-creating-code-02-08.swift",
  "syntax": "swift",
  "type": "file"
}

Actual behavior

Show the wrong highlighting (Due to extra empty line on Line 4 and Line 5).

There should be only 1 empty line (Line 3). Currently there will be 3 empty line(Line 3 - Line 5)

Steps To Reproduce

The tutorial resource can be downloaded from https://developer.apple.com/documentation/xcode/slothcreator_building_docc_documentation_in_xcode

Swift-DocC-Render Version Information

No response

[Kyle-Ye]

The original json info is the following:

"/*",
"See LICENSE folder for this sample’s licensing information.",
"",
"Abstract:",

And the 3rd element should be <span class="syntax-comment"></span>.

Currently it occupied 3 elements. And this is why we have 2 extra new empty line.

[Kyle-Ye]

Looks like this is a bug in the implementation of highlightContent in src/utils/syntax-highlight.js

const result = getLines(element.innerHTML)
  .reduce((all, lineText) => `${all}<span class="${className}">${lineText || '\n\n'}</span>\n`, '');

This question can turn into this js issue:

var a = ['/*', 'S', '', 'A', '*/']
var className = "syntax-comment"
const result = a
    .reduce((all, lineText) => `${all}<span class="${className}">${lineText || '\n\n'}</span>\n`, '');
console.log(result)

// Expected output:
<span class="syntax-comment">/*</span>
<span class="syntax-comment">S</span>
<span class="syntax-comment"></span>
<span class="syntax-comment">A</span>
<span class="syntax-comment">*/</span>
// Current output
<span class="syntax-comment">/*</span>
<span class="syntax-comment">S</span>
<span class="syntax-comment">

</span>
<span class="syntax-comment">A</span>
<span class="syntax-comment">*/</span>