docs: fix broken GitHub code-reference blocks after fumadocs migration (#12213)

# Which Problems Are Solved

Pages in `apps/docs` that embed source from GitHub via the Docusaurus
convention

````
```js reference

https://github.com/zitadel/actions/blob/main/examples/org_metadata_claim.js
```
````

stopped working after the migration from Docusaurus to fumadocs. The old
`docusaurus-theme-github-codeblock` plugin used to fetch the file and
render it; fumadocs has no support for that meta, so the page rendered
the raw URL as plain code-block text. Visible at
`/docs/apis/actions/code-examples` and 16 other pages.

# How the Problems Are Solved

- Converted every ```` ```<lang> reference\n<URL>\n``` ```` block (46
total across 17 `.mdx` files) to the native fumadocs JSX form:
`<GithubCodeBlock url="<URL>" />`. The existing `<details>`/`<summary>`
collapsibles around blocks are kept — they're an authoring choice, not
part of the rendering bug.
- Updated `apps/docs/components/github-code-block.tsx` to render via
`DynamicCodeBlock` from `fumadocs-ui/components/dynamic-codeblock`
(proper shiki highlighting) instead of raw `CodeBlock` + `Pre` (which
produced unhighlighted output). Also fixed language detection so a URL
hash like `#L10-L20` no longer pollutes the language token.
- Registered `GithubCodeBlock` globally in
`apps/docs/mdx-components.tsx`, matching how every other shared
component (`APIPage`, `Callout`, `Tab/Tabs`, `Step/Steps`, `Admonition`,
`TerminologyUpdate`) is exposed. MDX files no longer need a local
`import`.

# Additional Changes

- Normalized the two MDX files that were already using the JSX form
(`examples/secure-api/python-django.mdx`,
`examples/secure-api/java-spring.mdx`): removed their now-redundant
local `import { GithubCodeBlock }` and rewrote 9 long-form
`<GithubCodeBlock url="..."></GithubCodeBlock>` tags to self-closing for
consistency.

# Additional Context

Verified locally with `pnpm --filter @zitadel/docs dev`:

- `/docs/apis/actions/code-examples` — 20 shiki-highlighted code blocks
rendered inside the `<details>` collapsibles (was 0).
- `/docs/apis/openidoauth/claims` — line-range hashes (`#L9-L11`)
honored.
- `/docs/examples/login/flutter` — mixed languages (xml/dart/html)
detected and highlighted.
- `/docs/guides/integrate/external-audit-log` — edge case of fenced
reference indented inside a numbered list also converted and rendered.

Greps:
- `^[ \t]*\`\`\`[a-zA-Z0-9]+ reference` in `apps/docs/content/**/*.mdx`
→ 0 matches.
- `<GithubCodeBlock url="` in `apps/docs/content/**/*.mdx` → 55 matches.
- `from '@/components/github-code-block'` in
`apps/docs/content/**/*.mdx` → 0 matches.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>

apps/docs/content/guides/integrate/external-audit-log.mdx

@@ -51,9 +51,7 @@ In my external system for example Splunk I want to be able to get an information
 
 1. Define an action that logs successful and failed login to your stdout.
    Make sure the name of the action is the same as of the function in the script.
-   ```ts reference
-   https://github.com/zitadel/actions/blob/main/examples/post_auth_log.js
-   ```
+   <GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/post_auth_log.js" />
 2. Add the action to the following Flows and Triggers
    - Flow: Internal Authentication - Trigger: Post Authentication
    - Flow: External Authentication - Trigger: Post Authentication
@@ -71,9 +69,7 @@ You want to send a request to an endpoint each time after an authentication (suc
 1. Define an action that calls API endpoint.
    Make sure the name of the action is the same as of the function in the script.
    Example how to call an API endpoint:
-   ```ts reference
-   https://github.com/zitadel/actions/blob/main/examples/make_api_call.js
-   ```
+   <GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/make_api_call.js" />
 2. Add the action to the following flows and triggers
    - Flow: Internal Authentication - Trigger: Post Authentication
    - Flow: External Authentication - Trigger: Post Authentication

apps/docs/content/guides/integrate/identity-providers/additional-information.mdx

@@ -11,6 +11,4 @@ import PrefillAction from './_prefill_action.mdx';
 <PrefillAction components={props.components}  fields="specific fields like firstname, lastname and email verified" provider="your providers"/>
 
 This action is an example for OKTA. You can also use it for any other provider
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/okta_identity_provider.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/okta_identity_provider.js" />

apps/docs/content/guides/integrate/identity-providers/azure-ad-saml.mdx

@@ -125,6 +125,4 @@ Click **Microsoft Entra**
 
 <PrefillAction components={props.components}  fields="username, firstname, lastname, displayname, email and email verified" provider="Entra"/>
 
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/entra_id_saml_prefil_register_form.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/entra_id_saml_prefil_register_form.js" />

apps/docs/content/guides/integrate/identity-providers/github.mdx

@@ -86,6 +86,4 @@ ZITADEL ensures that at least the `openid`-scope is always sent.
 
 <PrefillAction components={props.components}  fields="firstname and lastname" provider="GitHub"/>
 
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/github_identity_provider.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/github_identity_provider.js" />

apps/docs/content/guides/integrate/identity-providers/gitlab.mdx

@@ -84,6 +84,4 @@ ZITADEL ensures that at least the `openid`-scope is always sent.
 
 <PrefillAction components={props.components}  fields="firstname and lastname" provider="GitLab"/>
 
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/gitlab_identity_provider.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/gitlab_identity_provider.js" />

apps/docs/content/guides/integrate/identity-providers/linkedin_oauth.mdx

@@ -78,6 +78,4 @@ import TestSetup from './_test_setup.mdx';
 
 <PrefillAction components={props.components}  fields="firstname, lastname, username, email and email verified" provider="LinkedIn"/>
 
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/linkedin_identity_provider.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/linkedin_identity_provider.js" />

apps/docs/content/guides/integrate/identity-providers/okta-oidc.mdx

@@ -77,6 +77,4 @@ in addition to the client secret.
 
 <PrefillAction components={props.components}  fields="firstname, lastname and email verified" provider="Okta"/>
 
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/okta_identity_provider.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/okta_identity_provider.js" />

apps/docs/content/guides/integrate/identity-providers/okta_saml.mdx

@@ -118,6 +118,4 @@ You can also fill the optional fields if needed:
 
 <PrefillAction components={props.components}  fields="username, firstname, lastname, email and email verified" provider="OKTA"/>
 
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/okta_saml_prefil_register_form.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/okta_saml_prefil_register_form.js" />

apps/docs/content/guides/integrate/retrieve-user-roles.mdx

@@ -210,9 +210,7 @@ If your application requires a custom role structure, [ZITADEL actions](/apis/ac
 <details open="open">
 <summary>Example on github</summary>
 
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/custom_roles.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/custom_roles.js" />
 
 </details>
 

apps/docs/content/guides/integrate/zitadel-apis/example-zitadel-api-with-go.mdx

@@ -41,9 +41,7 @@ go get -u github.com/zitadel/zitadel-go/v3
 Create a new go file with the content below. This will create a application and call its `GetMyOrg` function on the ManagementService.
 The SDK will make sure you will have access to the API by retrieving a Bearer Token using JWT Profile with the provided scopes (`openid` and `urn:zitadel:iam:org:project:id:zitadel:aud`).
 
-```go reference
-https://github.com/zitadel/zitadel-go/blob/next/example/client/cli/cli.go
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-go/blob/next/example/client/cli/cli.go" />
 
 ### Test
 

apps/docs/content/guides/manage/customize/behavior.mdx

@@ -29,9 +29,7 @@ Before you start, make sure you have everything set up correctly.
 4. Paste this snippet into the multiline text-field.
 5. Replace the snippets placeholders and select **Save**.
 
-```js reference
-https://github.com/zitadel/actions/blob/main/examples/add_user_grant.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_user_grant.js" />
 
 ## Run the action when a user registers