Refactor codeBlockButton Plugins

[gerteck]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Overview of changes:

Refactored logic to insert buttons only if pre element contains the code element. Scoped CSS rules (specifically, for <pre/> element to minimize side effects. Modularized CSS rules to be included only if plugin is enabled.

Refer to #1043#1668 to check CSS rules that were added for the code block buttons.

Fixes#2624

Anything you'd like to highlight/discuss:

Testing instructions:

See #2624

Enable relevant plugins, and put some sample code into index.md:

## Test
[`][`][`]js console.log('hello world');
[`][`][`]
<pre>
/\_/\
( o.o )
> ^ <
</pre>

Buttons should not show up beside the cat. It should only show up for the code block above it.

Proposed commit message: (wrap lines at 72 characters)

Refactor codeBlockButton Plugins

Refactored logic to insert plugin buttons only if
pre element contains the code element as per CommonMark
spec for fenced code blocks. Scoped CSS rules for pre element
to minimize side effects. Modularized previously global button
CSS rules to be included only if plugin is enabled.

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

Reviewer checklist:

Indicate the SEMVER impact of the PR:

• Major (when you make incompatible API changes)
• Minor (when you add functionality in a backward compatible manner)
• Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

• To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

• what was the old feature that was made obsolete
• any replacement feature (if any), and
• how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

[Tim-Siu]

This PR successfully addresses the problems spotted in #2624. It also refactors the code block button CSS by moving it from the general stylesheet (markbind.css) to a dedicated CSS file (codeBlockButtons.css).

Improvements:

1. Addressed #2624 through Improved selector: Using :has(.function-btn-container) is more specific than the previous selector. This will make sure code block plugin does not affect other plugins that uses <pre>.
2. Better organization: Moving CSS to a dedicated file improves modularity (and potentially performance)

Suggestions:

Actually don't have any suggestion.

The improved conditional check node.children?.some(child => child.name === 'code') is good. I can't think of any corner case.

Thanks @AgentHagu for carefully reviewing the code and @gerteck for detailed explanation.

The changes look good!

[lhw-1]

LGTM. The changes make sense as per #2624 and possible concerns were addressed by @AgentHagu and @gerteck. Thanks @gerteck for the PR!