inexplicable diff highlighting in docs

[Rich-Harris]

i have no idea where this is coming from:

[Vardhaman619]

packages/site-kit/src/lib/markdown/renderer.ts

In codebase, for code snippets within markdown files, we use custom delimiters to highlight specific code sections:

+++...+++ for additions
---...--- for removals
These custom delimiters are internally replaced with whitespace strings using the delimiter_substitutes object:

const delimiter_substitutes = {
    '---': '             ', // 13 spaces
    '+++': '           ',   // 11 spaces
    ':::': '         '      // 9 spaces
};

The issue arises when code snippets contain deeply nested objects or code blocks. By using pure whitespace as substitutes, we're encountering problems with our highlighting logic.

The existing regex patterns used to identify these highlights are as follows:

html = html
    .replace(/ {13}([^ ][^]+?) {13}/g, (_, content) => highlight_spans(content, 'highlight remove'))
    .replace(/ {11}([^ ][^]+?) {11}/g, (_, content) => highlight_spans(content, 'highlight add'))
    .replace(/ {9}([^ ][^]+?) {9}/g, (_, content) => highlight_spans(content, 'highlight'));

The whitespace substitutes (' ', ' ', etc.) become indistinguishable from normal indentation in deeply nested code blocks. As a result:

• Legitimate indented lines are mistakenly identified as highlight markers, causing incorrect highlighting.
• The current regex patterns unintentionally match regular nested indentation, leading to unexpected behavior, especially in more complex or deeply nested code structures.