feat(sync): extract style attributes from HTML comments

[jstirnaman]

Summary

Add support for extracting Hugo style attributes from HTML comments in plugin READMEs during the sync process.

Problem

Hugo style attributes like {.green} and {.orange} render as literal text on GitHub, making source READMEs look messy.

Solution

Use HTML comments to hide style attributes in source:

#### Recommended <!-- {.green} -->
#### Not recommended <!-- {.orange} -->

The sync script extracts these and applies them:

#### Recommended {.green}
#### Not recommended {.orange}

Supported Classes

• {.green}, {.orange} - Color styling
• {.recommended}, {.not-recommended} - Semantic styling
• Any other {.classname} format

Test Plan

• Verify regex extracts style attributes correctly
• Test sync with downsampler plugin containing HTML comment styles

[Copilot]

Pull request overview

This PR adds functionality to extract Hugo style attributes from HTML comments in plugin READMEs during the sync process, allowing source files to render cleanly on GitHub while supporting Hugo styling in the documentation site.

Key changes:

• Adds extractStyleAttributes() function that converts #### Heading <!-- {.class} --> to #### Heading {.class}
• Integrates the transformation into the content processing pipeline between paragraph enhancement and code block formatting

[sanderson]

To clarify, these aren't just style attributes, these are custom html attributes as well (Goldmark Readme). For example:

## Heading 2 {.css-class #element-id attr="some value"}

I think it even now supports custom attributes on any block element, including paragraphs:

This is a markdown paragraph with custom attributes.
{#paragraph-id .custom-class attr="some value"}

But I may be wrong about block element support. I vaguely remember testing.

Does the regex account for this? Is the intent here to replace all of these attributes in the docs with HTML comments or just those in Telegraf READMEs?

[jstirnaman]

To clarify, these aren't just style attributes, these are custom html attributes as well (Goldmark Readme). For example:

## Heading 2 {.css-class #element-id attr="some value"}

I think it even now supports custom attributes on any block element, including paragraphs:

This is a markdown paragraph with custom attributes.
{#paragraph-id .custom-class attr="some value"}

But I may be wrong about block element support. I vaguely remember testing.

Does the regex account for this? Is the intent here to replace all of these attributes in the docs with HTML comments or just those in Telegraf READMEs?

This script is currently only for the InfluxDB3 plugin READMEs, though I hope to extend it for client libs and other upstream docs soon. It won't be used for Telegraf--they have a separate workflow that they own.
Alternatively, we could match incoming headings and force styling onto them, but I chose the declarative path.
I kept the regex greedy to extract classes or attributes from comments. Last minute, I briefly considered using a data attribute instead, but class seemed just as appropriate for this.