diff --git a/apps/public/content/docs/index.mdx b/apps/public/content/docs/index.mdx
index b36460d5..60824d57 100644
--- a/apps/public/content/docs/index.mdx
+++ b/apps/public/content/docs/index.mdx
@@ -23,7 +23,7 @@ Tracks a custom event with the given name and optional properties.
 
 You can identify the user directly with this method.
 
-```js filename="Example shown in JavaScript"
+```js title="Example shown in JavaScript"
 track('your_event_name', {
   foo: 'bar',
   baz: 'qux',
diff --git a/apps/public/content/docs/sdks/javascript.mdx b/apps/public/content/docs/sdks/javascript.mdx
index 047d6896..1b9712c6 100644
--- a/apps/public/content/docs/sdks/javascript.mdx
+++ b/apps/public/content/docs/sdks/javascript.mdx
@@ -19,7 +19,7 @@ npm install @openpanel/sdk
 
 ### Step 2: Initialize
 
-```js filename="op.ts"
+```js title="op.ts"
 import { OpenPanel } from '@openpanel/sdk';
 
 const op = new OpenPanel({
@@ -34,7 +34,7 @@ const op = new OpenPanel({
 
 ### Step 3: Usage
 
-```js filename="main.ts"
+```js title="main.ts"
 import { op } from './op.js';
 
 op.track('my_event', { foo: 'bar' });
@@ -47,7 +47,7 @@ op.track('my_event', { foo: 'bar' });
 
 You can track events with two different methods: by calling the `op.track( directly or by adding `data-track` attributes to your HTML elements.
 
-```ts filename="index.ts"
+```ts title="index.ts"
 import { op } from './op.ts';
 
 op.track('my_event', { foo: 'bar' });
@@ -57,7 +57,7 @@ op.track('my_event', { foo: 'bar' });
 
 To identify a user, call the `op.identify( method with a unique identifier.
 
-```js filename="index.js"
+```js title="index.js"
 import { op } from './op.ts';
 
 op.identify({
@@ -75,7 +75,7 @@ op.identify({
 
 To set properties that will be sent with every event:
 
-```js filename="index.js"
+```js title="index.js"
 import { op } from './op.ts'
 
 op.setGlobalProperties({
@@ -88,7 +88,7 @@ op.setGlobalProperties({
 
 To create an alias for a user:
 
-```js filename="index.js"
+```js title="index.js"
 import { op } from './op.ts'
 
 op.alias({
@@ -103,7 +103,7 @@ To increment a numeric property on a user profile.
 
 - `value` is the amount to increment the property by. If not provided, the property will be incremented by 1.
 
-```js filename="index.js"
+```js title="index.js"
 import { op } from './op.ts'
 
 op.increment({
@@ -119,7 +119,7 @@ To decrement a numeric property on a user profile.
 
 - `value` is the amount to decrement the property by. If not provided, the property will be decremented by 1.
 
-```js filename="index.js"
+```js title="index.js"
 import { op } from './op.ts'
 
 op.decrement({
@@ -133,7 +133,7 @@ op.decrement({
 
 To clear the current user's data:
 
-```js filename="index.js"
+```js title="index.js"
 import { op } from './op.ts'
 
 op.clear()
diff --git a/apps/public/content/docs/sdks/nextjs.mdx b/apps/public/content/docs/sdks/nextjs.mdx
index 76c74919..80c60221 100644
--- a/apps/public/content/docs/sdks/nextjs.mdx
+++ b/apps/public/content/docs/sdks/nextjs.mdx
@@ -114,7 +114,7 @@ Since you can't use hooks in server components, you need to create an instance o
 
 <Callout>Remember, your client secret is exposed here so do not use this on client side.</Callout>
 
-```tsx filename="utils/op.ts"
+```tsx title="utils/op.ts"
 import { OpenPanel } from '@openpanel/nextjs';
 
 export const op = new OpenPanel({
@@ -132,7 +132,7 @@ Refer to the [Javascript SDK](/docs/sdks/javascript#usage) for usage instruction
 
 You can track events with two different methods: by calling the `op.track( directly or by adding `data-track` attributes to your HTML elements.
 
-```ts filename="index.ts"
+```ts title="index.ts"
 useOpenPanel().track('my_event', { foo: 'bar' });
 ```
 
@@ -140,7 +140,7 @@ useOpenPanel().track('my_event', { foo: 'bar' });
 
 To identify a user, call the `op.identify( method with a unique identifier.
 
-```js filename="index.js"
+```js title="index.js"
 useOpenPanel().identify({
   profileId: '123', // Required
   firstName: 'Joe',
@@ -158,7 +158,7 @@ For server components you can use the `IdentifyComponent` component which is exp
 
 > This component is great if you have the user data available on the server side.
 
-```tsx filename="app/nested/layout.tsx"
+```tsx title="app/nested/layout.tsx"
 import { IdentifyComponent } from '@openpanel/nextjs';
 
 export default function Layout({ children }) {
@@ -186,7 +186,7 @@ export default function Layout({ children }) {
 
 To set properties that will be sent with every event:
 
-```js filename="index.js"
+```js title="index.js"
 useOpenPanel().setGlobalProperties({
   app_version: '1.0.2',
   environment: 'production',
@@ -197,7 +197,7 @@ useOpenPanel().setGlobalProperties({
 
 To create an alias for a user:
 
-```js filename="index.js"
+```js title="index.js"
 useOpenPanel().alias({
   alias: 'a1',
   profileId: '1'
@@ -210,7 +210,7 @@ To increment a numeric property on a user profile.
 
 - `value` is the amount to increment the property by. If not provided, the property will be incremented by 1.
 
-```js filename="index.js"
+```js title="index.js"
 useOpenPanel().increment({
   profileId: '1',
   property: 'visits',
@@ -224,7 +224,7 @@ To decrement a numeric property on a user profile.
 
 - `value` is the amount to decrement the property by. If not provided, the property will be decremented by 1.
 
-```js filename="index.js"
+```js title="index.js"
 useOpenPanel().decrement({
   profileId: '1',
   property: 'visits',
@@ -236,7 +236,7 @@ useOpenPanel().decrement({
 
 To clear the current user's data:
 
-```js filename="index.js"
+```js title="index.js"
 useOpenPanel().clear()
 ```
 
@@ -286,7 +286,7 @@ export function GET() {
 
 With `createNextRouteHandler` you can proxy your events through your server, this will ensure all events are tracked since there is a lot of adblockers that block requests to third party domains.
 
-```typescript filename="/app/api/op/route.ts"
+```typescript title="/app/api/[...op]/route.ts"
 import { createNextRouteHandler } from '@openpanel/nextjs/server';
 
 export const POST = createNextRouteHandler();
@@ -294,9 +294,9 @@ export const POST = createNextRouteHandler();
 
 Remember to change the `apiUrl` in the `OpenPanelComponent` to your own server.
 
-```tsx {2}
+```tsx
 <OpenPanelComponent
-  apiUrl="/api/op"
+  apiUrl="/api/op" // [!code highlight]
   clientId="your-client-id"
   trackScreenViews={true}
 />
diff --git a/apps/public/content/docs/sdks/script.mdx b/apps/public/content/docs/sdks/script.mdx
index 027e0468..7bf4a7d2 100644
--- a/apps/public/content/docs/sdks/script.mdx
+++ b/apps/public/content/docs/sdks/script.mdx
@@ -13,7 +13,7 @@ import WebSdkConfig from '@/components/web-sdk-config.mdx';
 
 Just insert this snippet and replace `YOUR_CLIENT_ID` with your client id.
 
-```html filename="index.html" /clientId: 'YOUR_CLIENT_ID'/
+```html title="index.html" /clientId: 'YOUR_CLIENT_ID'/
 <script>
   window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
   window.op('init', {
@@ -37,13 +37,13 @@ Just insert this snippet and replace `YOUR_CLIENT_ID` with your client id.
 
 You can track events with two different methods: by calling the `window.op('track')` directly or by adding `data-track` attributes to your HTML elements.
 
-```html filename="index.html"
+```html title="index.html"
 <button type="button" onclick="window.op('track', 'my_event', { foo: 'bar' })">
   Track event
 </button>
 ```
 
-```html filename="index.html"
+```html title="index.html"
 <button type="button" data-track="my_event" data-foo="bar">Track event</button>
 ```
 
@@ -51,7 +51,7 @@ You can track events with two different methods: by calling the `window.op('trac
 
 To identify a user, call the `window.op('identify')` method with a unique identifier.
 
-```js filename="main.js"
+```js title="main.js"
 window.op('identify', {
   profileId: '123', // Required
   firstName: 'Joe',
@@ -67,7 +67,7 @@ window.op('identify', {
 
 To set properties that will be sent with every event:
 
-```js filename="main.js"
+```js title="main.js"
 window.op('setGlobalProperties', {
   app_version: '1.0.2',
   environment: 'production',
@@ -78,7 +78,7 @@ window.op('setGlobalProperties', {
 
 To create an alias for a user:
 
-```js filename="main.js"
+```js title="main.js"
 window.op('alias', {
   alias: 'a1',
   profileId: '1'
@@ -91,7 +91,7 @@ To increment a numeric property on a user profile.
 
 - `value` is the amount to increment the property by. If not provided, the property will be incremented by 1.
 
-```js filename="main.js"
+```js title="main.js"
 window.op('increment', {
   profileId: '1',
   property: 'visits',
@@ -105,7 +105,7 @@ To decrement a numeric property on a user profile.
 
 - `value` is the amount to decrement the property by. If not provided, the property will be decremented by 1.
 
-```js filename="main.js"
+```js title="main.js"
 window.op('decrement', {
   profileId: '1',
   property: 'visits',
@@ -117,7 +117,7 @@ window.op('decrement', {
 
 To clear the current user's data:
 
-```js filename="main.js"
+```js title="main.js"
 window.op('clear');
 ```
 
@@ -129,7 +129,7 @@ You can filter out events by adding a `filter` property to the `init` method.
 
 Below is an example of how to disable tracking for users who have a `disable_tracking` item in their local storage.
 
-```js filename="main.js"
+```js title="main.js"
 window.op('init', {
   clientId: 'YOUR_CLIENT_ID',
   trackScreenViews: true,
@@ -150,7 +150,7 @@ npm install @openpanel/web
 
 #### Step 2: Initialize the SDK
 
-```js filename="op.js"
+```js title="op.js"
 import { OpenPanel } from '@openpanel/web';
 
 const op = new OpenPanel({
@@ -163,7 +163,7 @@ const op = new OpenPanel({
 
 #### Step 3: Use the SDK
 
-```js filename="main.js"
+```js title="main.js"
 import { op } from './op.js';
 
 op.track('my_event', { foo: 'bar' });
@@ -178,7 +178,7 @@ Getting ts errors when using the SDK? You can add a custom type definition file
 
 Just paste this code in any of your `.d.ts` files.
 
-```ts filename="op.d.ts"
+```ts title="op.d.ts"
 declare global {
   interface Window {
     op: {
@@ -205,7 +205,7 @@ npm install @openpanel/web
 
 Create a `op.d.ts`file and paste the following code:
 
-```ts filename="op.d.ts"
+```ts title="op.d.ts"
 /// <reference types="@openpanel/web" />
 ```
 </Steps>
\ No newline at end of file
diff --git a/apps/public/content/docs/sdks/web.mdx b/apps/public/content/docs/sdks/web.mdx
index ccc3a63f..ee2cd7d2 100644
--- a/apps/public/content/docs/sdks/web.mdx
+++ b/apps/public/content/docs/sdks/web.mdx
@@ -19,7 +19,7 @@ npm install @openpanel/web
 
 ### Step 2: Initialize
 
-```js filename="op.ts"
+```js title="op.ts"
 import { OpenPanel } from '@openpanel/web';
 
 const op = new OpenPanel({
@@ -37,7 +37,7 @@ const op = new OpenPanel({
 
 ### Step 3: Usage
 
-```js filename="main.ts"
+```js title="main.ts"
 import { op } from './op.js';
 
 op.track('my_event', { foo: 'bar' });
diff --git a/apps/public/content/docs/self-hosting/self-hosting.mdx b/apps/public/content/docs/self-hosting/self-hosting.mdx
index 14f0a7e6..083c578e 100644
--- a/apps/public/content/docs/self-hosting/self-hosting.mdx
+++ b/apps/public/content/docs/self-hosting/self-hosting.mdx
@@ -107,11 +107,11 @@ When self-hosting you'll need to provide your api url when initializing the SDK.
 
 The path should be `/api` and the domain should be your domain.
 
-```html filename="index.html" {4}
+```html title="index.html"
 <script>
   window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
   window.op('init', {
-    apiUrl: 'https://your-domain.com/api',
+    apiUrl: 'https://your-domain.com/api', // [!code highlight]
     clientId: 'YOUR_CLIENT_ID',
     trackScreenViews: true,
     trackOutgoingLinks: true,
@@ -121,11 +121,11 @@ The path should be `/api` and the domain should be your domain.
 <script src="https://openpanel.dev/op1.js" defer async></script>
 ```
 
-```js filename="op.ts" {4}
+```js title="op.ts"
 import { OpenPanel } from '@openpanel/sdk';
 
 const op = new OpenPanel({
-  apiUrl: 'https://your-domain.com/api',
+  apiUrl: 'https://your-domain.com/api', // [!code highlight]
   clientId: 'YOUR_CLIENT_ID',
   trackScreenViews: true,
   trackOutgoingLinks: true,