Docs: fix and restore live code snippet updates in interactive playgrounds

[julien-deramond]

Description

When interacting with the interactive playgrounds, the live code snippet was never updated to reflect the current state of the controls.

The ButtonPlayground, MenuPlacementPlayground, and NavbarPlacementPlayground components are supposed to update the live code snippet whenever the user changes a control, but nothing was ever updated. codeSnippet was always null because the selector .highlight code didn't match the actual rendered element .astro-code code.

This fixes the selector by targeting <pre class="astro-code"> directly, and replaces the textContent approach with a call to highlightCode from @libs/highlight.

Indeed, without calling this method, the content would have been updated, but without syntax highlighting!

Since Shiki is isomorphic, Vite bundles it for the browser transparently. The returned markup is parsed with DOMParser and the whole <pre> is swapped in the DOM, preserving both the updated content and Shiki's token spans with their theme CSS variables. The codeSnippetPre reference is updated on each swap so subsequent interactions keep targeting the right node.

Live previews

Now, the playground code snippets are updated 🥳

• https://deploy-preview-42593--twbs-bootstrap.netlify.app/docs/6.0/components/button/#playground
• https://deploy-preview-42593--twbs-bootstrap.netlify.app/docs/6.0/components/menu/#placement
• https://deploy-preview-42593--twbs-bootstrap.netlify.app/docs/6.0/components/navbar/#placement