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]>
2026-10-18 05:52:51 +00:00 · 2026-05-28 11:02:44 -07:00
parent c73e58489b
commit f4f43f5248
21 changed files with 103 additions and 186 deletions
@@ -1,44 +1,53 @@
-// components/github-code-block.tsx
-import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
+
+const REVALIDATE_SECONDS = 60 * 60 * 24;
+
+function toRawGithubUrl(url: string): string {
+    const parsed = new URL(url);
+    if (parsed.protocol !== 'https:' || parsed.hostname !== 'github.com') {
+        throw new Error(`GithubCodeBlock only accepts https://github.com URLs, got: ${url}`);
+    }
+    const segments = parsed.pathname.split('/').filter(Boolean);
+    if (segments.length < 5 || segments[2] !== 'blob') {
+        throw new Error(`Unexpected GitHub URL shape, expected /<owner>/<repo>/blob/<ref>/<path>, got: ${url}`);
+    }
+    const [owner, repo, , ref, ...path] = segments;
+    return `https://raw.githubusercontent.com/${owner}/${repo}/${ref}/${path.join('/')}`;
+}
+
+function parseLineRange(hash: string): { start: number; end: number } | null {
+    const match = hash.match(/L(\d+)(?:-L(\d+))?/);
+    if (!match) return null;
+    const start = parseInt(match[1], 10);
+    const end = match[2] ? parseInt(match[2], 10) : start;
+    return { start, end };
+}
+
+function sliceAndDedent(code: string, range: { start: number; end: number }): string {
+    const selected = code.split('\n').slice(range.start - 1, range.end);
+    const minIndent = selected.reduce((min, line) => {
+        if (line.trim().length === 0) return min;
+        const indent = line.match(/^\s*/)?.[0].length ?? 0;
+        return Math.min(min, indent);
+    }, Infinity);
+    const dedent = minIndent === Infinity ? 0 : minIndent;
+    return selected.map(line => line.slice(dedent)).join('\n');
+}

 export async function GithubCodeBlock({ url }: { url: string }) {
-    // 1. Parse the URL to get the raw content URL and line fragments
-    const urlObj = new URL(url);
-    const rawUrl = url
-        .replace('github.com', 'raw.githubusercontent.com')
-        .replace('/blob/', '/');
-
-    // Extract line numbers from hash (e.g., #L10-L20 or #L5)
-    const lineMatch = urlObj.hash.match(/L(\d+)(?:-L(\d+))?/);
-    const startLine = lineMatch ? parseInt(lineMatch[1], 10) : null;
-    const endLine = lineMatch ? (lineMatch[2] ? parseInt(lineMatch[2], 10) : startLine) : null;
-
-    // 2. Fetch the content
-    const response = await fetch(rawUrl);
+    const rawUrl = toRawGithubUrl(url);
+    const response = await fetch(rawUrl, { next: { revalidate: REVALIDATE_SECONDS } });
+    if (!response.ok) {
+        throw new Error(`GithubCodeBlock failed to fetch ${rawUrl}: ${response.status} ${response.statusText}`);
+    }
    let code = await response.text();

-    // 3. Optional: Extract specific lines
-    if (startLine !== null && endLine !== null) {
-        const lines = code.split('\n');
-        const selectedLines = lines.slice(startLine - 1, endLine);
-
-        // Remove common indentation (dedent)
-        const minIndent = selectedLines.reduce((min, line) => {
-            if (line.trim().length === 0) return min;
-            const indent = line.match(/^\s*/)?.[0].length ?? 0;
-            return Math.min(min, indent);
-        }, Infinity);
-
-        code = selectedLines
-            .map(line => line.slice(minIndent === Infinity ? 0 : minIndent))
-            .join('\n');
+    const range = parseLineRange(new URL(url).hash);
+    if (range) {
+        code = sliceAndDedent(code, range);
    }

-    const lang = url.split('.').pop()?.split('#')[0] || 'text';
+    const lang = new URL(url).pathname.split('.').pop() || 'text';

-    return (
-        <CodeBlock lang={lang}>
-            <Pre>{code}</Pre>
-        </CodeBlock>
-    );
-}
+    return <DynamicCodeBlock lang={lang} code={code} />;
+}
@@ -24,9 +24,7 @@ Extend the claims by a hardcoded value.
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/add_claim.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_claim.js" />

 </details>

@@ -37,9 +35,7 @@ Extend the claims by dynamically reading metadata from a user and sets the pictu
 <details open="">
 <summary>{props.summary ? props.summary : 'Code example'}</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/add_picture_claim_from_idp_metadata.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_picture_claim_from_idp_metadata.js" />

 </details>

@@ -50,9 +46,7 @@ Extend the claims by dynamically reading metadata from an organization and sets
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/org_metadata_claim.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/org_metadata_claim.js" />

 </details>

@@ -63,9 +57,7 @@ Some products require specific role mapping from ZITADEL, no worries we got you
 <details open="">
 <summary>Code example</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>

@@ -76,9 +68,7 @@ There's even a possibility to use the metadata of organizations the user is gran
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/custom_roles_org_metadata.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/custom_roles_org_metadata.js" />

 </details>

@@ -98,9 +88,7 @@ Some products require specific role mapping from ZITADEL, no worries we got you
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/set_custom_attribute.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/set_custom_attribute.js" />

 </details>

@@ -111,9 +99,7 @@ Extend the attributes by dynamically reading metadata from an organization and s
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/org_metadata_attribute.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/org_metadata_attribute.js" />

 </details>

@@ -135,9 +121,7 @@ Useful if you trust the provided information or don't want the users to verify t
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/verify_email.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/verify_email.js" />

 </details>

@@ -155,9 +139,7 @@ Allows you to assign default roles to a user after the user was created or feder
 <details open="">
 <summary>Code example</summary>

-```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" />

 </details>

@@ -177,9 +159,7 @@ Adding metadata to users allows you to set default metadata on users.
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/add_metadata.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_metadata.js" />

 </details>

@@ -199,9 +179,7 @@ If you use [Okta as an identity provider](/guides/integrate/identity-providers/o
 <details open="">
 <summary>Code example</summary>

-```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" />

 </details>

@@ -212,9 +190,7 @@ If you use [Gitlab as an identity provider](/guides/integrate/identity-providers
 <details open="">
 <summary>Code example</summary>

-```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" />

 </details>

@@ -225,9 +201,7 @@ If you use [GitHub as an identity provider](/guides/integrate/identity-providers
 <details open="">
 <summary>Code example</summary>

-```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" />

 </details>

@@ -238,9 +212,7 @@ If you use a [generic OIDC identity provider](/guides/integrate/identity-provide
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/set_idp_picture_metadata.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/set_idp_picture_metadata.js" />

 </details>

@@ -251,9 +223,7 @@ If you use [Okta as an identity provider](/guides/integrate/identity-providers/o
 <details open="">
 <summary>Code example</summary>

-```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" />

 </details>

@@ -264,9 +234,7 @@ If you use [Microsoft Entra as SAML identity provider](/guides/integrate/identit
 <details open="">
 <summary>Code example</summary>

-```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" />

 </details>

@@ -277,9 +245,7 @@ If you use a [SAML identity provider like mocksaml](/guides/integrate/identity-p
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/post_auth_saml.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/post_auth_saml.js" />

 </details>

@@ -305,9 +271,7 @@ Execution paths might change based on the application initiating the authenticat
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/execute_action_on_specific_app.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/execute_action_on_specific_app.js" />

 </details>

@@ -327,9 +291,7 @@ Your action can also check for errors during the login process.
 <details open="">
 <summary>Code example</summary>

-```js 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" />

 </details>

@@ -342,7 +304,5 @@ Allows you to limit the user interaction. The error thrown will be shown to the
 <details open="">
 <summary>Code example</summary>

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/throw_error.js
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/throw_error.js" />
 </details>
@@ -55,9 +55,7 @@ The object has the following fields and methods:

 ### Example

-```js reference
-https://github.com/zitadel/actions/blob/main/examples/make_api_call.js#L10-L20
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/make_api_call.js#L10-L20" />

 ## Log

@@ -87,21 +87,15 @@ Multiple examples of Actions that result in custom claims can be found in our [M

 ### Static values as custom claim

-```javascript reference
-https://github.com/zitadel/actions/blob/de69b56f6d0463817953b59a52ffd6afc6a366fb/examples/add_claim.js#L9-L11
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/de69b56f6d0463817953b59a52ffd6afc6a366fb/examples/add_claim.js#L9-L11" />

 ### Metadata as custom claim

-```javascript reference
-https://github.com/zitadel/actions/blob/main/examples/add_metadata.js#L9-L15
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/add_metadata.js#L9-L15" />

 ### Format roles claims

-```javascript reference
-https://github.com/zitadel/actions/blob/main/examples/custom_roles.js#L20-L33
-```
+<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/custom_roles.js#L20-L33" />

 ## Reserved Claims

@@ -86,9 +86,7 @@ flutter pub add oidc_default_store

 Navigate to your `AndroidManifest.xml` at `<projectRoot>/android/app/src/main/AndroidManifest.xml` and add the following activity with your custom scheme.

-```xml reference
-https://github.com/zitadel/zitadel_flutter/blob/main/android/app/src/main/AndroidManifest.xml#L29-L38
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel_flutter/blob/main/android/app/src/main/AndroidManifest.xml#L29-L38" />

 Furthermore, for `secure_storage`, you need to set the minimum SDK version to 18
 in `<projectRoot>/android/app/src/build.gradle`.
@@ -99,16 +97,12 @@ To reduce the commented default code, we will modify the `main.dart` file.

 First, the `MyApp` class: it remains a stateless widget:

-```dart reference
-https://github.com/zitadel/zitadel_flutter/blob/main/lib/main.dart#L14-L28
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel_flutter/blob/main/lib/main.dart#L14-L28" />

 Second, the `MyHomePage` class will remain a stateful widget with
 its title, we don't change any code here.

-```dart reference
-https://github.com/zitadel/zitadel_flutter/blob/main/lib/main.dart#L30-L37
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel_flutter/blob/main/lib/main.dart#L30-L37" />

 What we'll change now, is the `_MyHomePageState` class to enable
 authentication via ZITADEL and remove the counter button of the starter application. We'll show the username of the authenticated user.
@@ -126,16 +120,12 @@ Then the builder method, which does show the login button if you're not
 authenticated, a loading bar if the login process is going on and
 your name if you are authenticated:

-```dart reference
-https://github.com/zitadel/zitadel_flutter/blob/main/lib/main.dart#L119-L159
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel_flutter/blob/main/lib/main.dart#L119-L159" />

 And finally the `_authenticate` method which calls the authorization endpoint,
 then fetches the user info and stores the tokens into the secure storage.

-```dart reference
-https://github.com/zitadel/zitadel_flutter/blob/main/lib/main.dart#L45-L117
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel_flutter/blob/main/lib/main.dart#L45-L117" />

 Note that we have to use our http redirect URL for web applications or otherwise use our custom scheme for Android and iOS devices.
 To setup other platforms, read the documentation of the [Flutter Web Auth](https://pub.dev/packages/flutter_web_auth_2).
@@ -143,9 +133,7 @@ To setup other platforms, read the documentation of the [Flutter Web Auth](https
 To ensure our application catches the callback URL, you have to create a `auth.html` file in the `/web`
 folder with the following content:

-```html reference
-https://github.com/zitadel/zitadel_flutter/blob/main/web/auth.html
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel_flutter/blob/main/web/auth.html" />

 Now, you can run your application for iOS and Android devices with

@@ -61,9 +61,7 @@ go get -u github.com/zitadel/zitadel-go/v3

 Create a new go file with the content below. This will create an application with a home and profile page.

-```go reference
-https://github.com/zitadel/zitadel-go/blob/next/example/app/app.go
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-go/blob/next/example/app/app.go" />

 This will basically set up everything. So let's look at some parts of the code.

@@ -108,17 +106,13 @@ Now create two HTML files in the new `templates` folder and copy the content of

 The home page will display a short welcome message and allow the user to manually start the login process.

-```go reference
-https://github.com/zitadel/zitadel-go/blob/next/example/app/templates/home.html
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-go/blob/next/example/app/templates/home.html" />

 **profile.html**

 The profile page will display the Userinfo from the authentication context and allow the user to logout.

-```go reference
-https://github.com/zitadel/zitadel-go/blob/next/example/app/templates/profile.html
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-go/blob/next/example/app/templates/profile.html" />

 ### Start your application

@@ -94,9 +94,7 @@ If authorization is required, the token must not be expired and the API has to b

 For tests, we will use a Personal Access Token.

-```go reference
-https://github.com/zitadel/zitadel-go/blob/next/example/api/http/main.go
-```
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-go/blob/next/example/api/http/main.go" />

 You will need to provide some values for the program to run:
 - `domain`: Your ZITADEL Custom Domain, e.g. https://my-domain.zitadel.cloud
@@ -3,7 +3,6 @@ title: Secure Java Spring Boot API Application with ZITADEL
 description: "Secure Java Spring Boot APIs using OAuth 2.0 Token Introspection with ZITADEL."
 sidebar_label: Java Spring Boot
 ---
-import { GithubCodeBlock } from '@/components/github-code-block';

 This integration guide shows you how to integrate **ZITADEL** into your Java Spring Boot API. It demonstrates how to secure your API using
 OAuth 2 Token Introspection.
@@ -45,7 +44,7 @@ into Spring Security `authiorities`, which can be used later on to determine the

 So in your application, create a `support/zitadel` package and in there the `CustomAuthorityOpaqueTokenIntrospector.java`:

-<GithubCodeBlock url="https://github.com/zitadel/zitadel-java/blob/main/api/src/main/java/demo/app/support/zitadel/CustomAuthorityOpaqueTokenIntrospector.java"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-java/blob/main/api/src/main/java/demo/app/support/zitadel/CustomAuthorityOpaqueTokenIntrospector.java" />

 ### Application server settings

@@ -55,11 +54,11 @@ In a new `config` package, create the `WebSecurityConfig.java`.
 This class will take care of the authorization by require the calls on `/api/tasks` to be authorized. Any other endpoint will be public by default.
 It will also use the just created CustomAuthorityOpaqueTokenIntrospector for the introspection call:

-<GithubCodeBlock url="https://github.com/zitadel/zitadel-java/blob/main/api/src/main/java/demo/app/config/WebSecurityConfig.java"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-java/blob/main/api/src/main/java/demo/app/config/WebSecurityConfig.java" />

 For the authorization (and the server in general) to work, the application needs some settings, so please provide the following to your `application.yml` (resources folder):

-<GithubCodeBlock url="https://github.com/zitadel/zitadel-java/blob/main/api/src/main/resources/application.yml"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-java/blob/main/api/src/main/resources/application.yml" />

 Note that the `introspection-uri`, `client-id` and `client-secret` are only placeholders. You can either change them in here using the values provided by ZITADEL
 or pass them later on as arguments when starting the application.
@@ -75,7 +74,7 @@ If authorization is required, the token must not be expired and the API has to b

 For tests we will use a Personal Access Token or the [Java Spring web example](../login/java-spring).

-<GithubCodeBlock url="https://github.com/zitadel/zitadel-java/blob/main/api/src/main/java/demo/app/api/ExampleController.java"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/zitadel-java/blob/main/api/src/main/java/demo/app/api/ExampleController.java" />

 ## Test API

@@ -8,7 +8,6 @@ import AppJWT from '../imports/_app_jwt.mdx';
 import ServiceAccountJWT from '../imports/_serviceaccount_jwt.mdx';
 import ServiceAccountRole from '../imports/_serviceaccount_role.mdx';
 import SetupPython from '../imports/_setup_python.mdx';
-import { GithubCodeBlock } from '@/components/github-code-block';

 This integration guide demonstrates the recommended way to incorporate ZITADEL into your Django Python application.
 It explains how to check the token validity in the API and how to check for permissions.
@@ -63,7 +62,7 @@ For this example we need the following dependencies:

 For the dependencies we need a requirements.txt-file with the following content:

-<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/requirements.txt"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/requirements.txt" />

 Then install all dependencies with:
 ```bash
@@ -81,7 +80,7 @@ django-admin startproject myapi .

 There is info needed for the introspection calls, which we put into the settings.py:

-<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/myapi/settings.py#L125-L133"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/myapi/settings.py#L125-L133" />

 and create a ".env"-file in the root folder with the settings as an example:
 ```bash
@@ -103,16 +102,16 @@ API_PRIVATE_KEY_FILE_PATH = '/tmp/example/250719519163548112.json'
 To validate the tokens, we need a validator which can be called in the event of API-calls.

 validator.py:
-<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/myapi/validator.py"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/myapi/validator.py" />

 ### Requests and URLs

 We define 3 different endpoints which differ in terms of requirements.
 views.py:
-<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/myapi/views.py"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/myapi/views.py" />

 To handle endpoints the urls have to be added to the urls.py:
-<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/myapi/urls.py"></GithubCodeBlock>
+<GithubCodeBlock url="https://github.com/zitadel/example-python-django-oauth/blob/main/myapi/urls.py" />

 ### DB

@@ -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
@@ -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" />
@@ -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" />
@@ -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" />
@@ -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" />
@@ -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" />
@@ -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" />
@@ -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" />
@@ -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>

@@ -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

@@ -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

@@ -6,6 +6,7 @@ import { Callout } from 'fumadocs-ui/components/callout';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { Step, Steps } from 'fumadocs-ui/components/steps';
 import Admonition from '@/components/docusaurus/admonition';
+import { GithubCodeBlock } from '@/components/github-code-block';

 export function useMDXComponents(components?: MDXComponents): MDXComponents {
  return {
@@ -18,6 +19,7 @@ export function useMDXComponents(components?: MDXComponents): MDXComponents {
    Steps,
    APIPage,
    TerminologyUpdate,
+    GithubCodeBlock,
    ...components,
  };
 }