fix(theme): CodeBlock should accept title of ReactNode type

[lebalz]

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 CodeBlock component is a nice component that can be reused consistently through all the docs. To allow more customization, it would be nice to pass ReactNodes instead of plain strings to the title container. This is already possible and works by passing in ReactNodes and casting them as any:

<CodeBlock
  language="yaml"
  title={
    (<div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
      <span>
        <code>ReactNode</code> title
      </span>{' '}
      <span className="badge badge--primary">YAML</span>
    </div>) as any
  }>
  {`link:
  title: front page
  path: /docs/`}
</CodeBlock>

This PR fixes the types and adds a dogfood example.

<CodeBlock
  language="yaml"
  title={
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
      <span>
        <code>ReactNode</code> title
      </span>{' '}
      <span className="badge badge--primary">YAML</span>
    </div>
  }>
  {`link:
  title: front page
  path: /docs/`}
</CodeBlock>

Test Plan

Dogfooding example

Test links

Deploy preview: https://deploy-preview-10999--docusaurus-2.netlify.app/tests/pages/code-block-tests/#code-blocks-with-reactnode-in-title

Related issues/PRs

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	156e542
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/67d7e3989af8a900081f341d
😎 Deploy Preview	https://deploy-preview-10999--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 configuration.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	Report
/	🟠 71	🟢 98	🟢 100	🟢 100	Report
/docs/installation	🟠 50	🟢 97	🟢 100	🟢 100	Report
/docs/category/getting-started	🟠 73	🟢 100	🟢 100	🟠 86	Report
/blog	🟠 63	🟢 96	🟢 100	🟠 86	Report
/blog/preparing-your-site-for-docusaurus-v3	🔴 46	🟢 92	🟢 100	🟢 100	Report
/blog/tags/release	🟠 63	🟢 96	🟢 100	🟠 86	Report
/blog/tags	🟠 73	🟢 100	🟢 100	🟠 86	Report

[slorber]

Thanks, agree it's ok to accept ReactNode 👍