Implement highlight/strikeout/wrap for code listings

[DebugSteven]

Summary

This PR implements new code block options for line highlighting, line striking, line wrapping, and showing line numbers. When the enable-experimental-code-block flag is enabled, code listings will have access to highlight, strikeout, and wrap properties forwarded in the render JSON.

User Experience

• Lines listed in highlight appear with the same highlight seen in tutorials.
• Lines listed in strikeout appear with a strikethrough line.
• When wrap is present and greater than 0, code lines are soft-wrapped near the specified width.
• When the showLineNumbers option is used on a code block, line numbers will render.
• These options can be combined in the same code block.

Implementation Overview

• Reads highlight: [Int]?, strikeout: [Int]?, wrap: Int?, and showLineNumbers (boolean) from RenderBlockContent.codeListing
• Applies highlighting and strikethrough per line
• Applies wrapping and line layout to the specified width per code block container

Dependencies

This PR depends on associated changes in swift-docc to actually render and handle the highlight, strikeout, wrap, and showLineNumbers options. The associated swift-docc PR is here: swiftlang/swift-docc#1287

Testing

Setup

Use the additional-metadata branches for swift-docc and swift-docc-render with the new highlight, strikeout, wrap, and showLineNumbers changes.
Rebuild documentation using swift-docc and the feature flag enable-experimental-code-block. Serve it using a local build of swift-docc-render.

How to Test

1. In any code listing using ``` or by adding a code listing, add the highlight, `strikeout`, `wrap` and/or `showLineNumbers` options after the language (optionally) like this:

```swift, highlight=[1,3,4], strikeout=[2, 3], wrap=40
let a = 1
let b = 2
let c = 3
let d = 4
```

2. Confirm highlighted lines and struck-through lines have the correct styling
3. Confirm that wrapping is styled with the configured width.
4. Confirm the show line number option shows line numbers.
5. Confirm these options can be combined and are styled correctly.
6. Verify the above behavior with and without a language token in the language line.

Checklist

• Added tests
• Ran npm test, and it succeeded
• Updated documentation if necessary

These new options looks like the below:

Compared to without these options:

[mportiz08]

I haven't had a chance to check out the code in this PR yet, but I have a quick question about the styling for highlighted lines:

Would it maybe make sense to try and re-use the highlight color/style that are already used in tutorials? Example:

Or maybe you've already tried that already. The fluorescent orange color brings warning/deprecation semantics to my mind, which doesn't necessarily seem like the same idea.

[mportiz08]

I'm also curious if you've considered adding the ability to configure line number display on/off with a custom setting like this?

I feel like it would be super useful in combination with the new wrapping feature to more easily distinguish between soft wrapped line vs purposeful newlines in the actual code.

[marinaaisa]

Hi @DebugSteven , amazing work! thank you so much for your PR!

I left some suggestions to refactor the code a bit but everything else is great!

As @mportiz08 mentioned, I also think that you should consider changing the code of the highlighting to match the tutorials ones :)

Excited for this PR!

[heckj]

@marinaaisa @mportiz08 I was the source for the different coloration - I wanted an option that was significantly more like a highlighter so that it would pull more attention, especially in a an article context where a reader is more likely to be skimming, so that it drew their attention to the relevant sections quickly.

I totally get wanting to keep it consistent though, my biggest concern, especially with the dark mode viewing, is that the highlighting is too subtle - and only if you're really focused on the content will you capture that detail.

We also wanted to extend beyond what the tutorial offers - for example, the tutorial content doesn't display a deleted line, which is sometimes a critical piece of what's happening in an explanation, hence reaching for the strikeout flavoring.