docs: add mdx-code-block around tabs; use JS example for magic comments

[Josh-Cena]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

The Netlify deployment is failing again. Let's see if adding mdx-code-block fixes it. Also addresses a suggestion at #7178 (comment)

Test Plan

Cross our fingers

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	ae7b91f
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62726fa49a009d000929a1d4
😎 Deploy Preview	https://deploy-preview-7307--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	66
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7307--docusaurus-2.netlify.app/