1
```markdown title=src/example.md
2
example
3
```

1
import { definePlugin } from "@expressive-code/core";
2

3
export function pluginFileTitle() {
4
  return definePlugin({
5
    name: "File Title",
6
    hooks: {
7
      preprocessMetadata: ({ codeBlock }) => {
8
        const meta = codeBlock.meta;
9
        if (!meta) return;
10

11
        const fileMatch = meta.match(/title=([^\s]+)/);
12
        if (fileMatch) {
13
          codeBlock.props.title = fileMatch[1];
14
          codeBlock.meta = meta.replace(fileMatch[0], "").trim();
15
        }
16
      },
17
    },
18
  });
19
}

1
/* File title styles */
2
.frame.has-title:not(.is-terminal) {
3
    .header {
4
        @apply flex items-center;
5
        padding: 0.5rem 1rem !important;
6
        background: var(--codeblock-topbar-bg);
7
        border-bottom: 1px solid oklch(0.25 0.02 var(--hue)) !important;
8
        min-height: 2.5rem;
9
        height: 2.75rem !important;
10
    }
11

12
    .title {
13
        @apply text-sm font-medium;
14
        color: oklch(0.75 0.05 var(--hue)) !important;
15
        padding-right: 1rem !important;
16
        padding-top: 0.1rem !important;
17
    }
18

19
    [data-language]::before {
20
        position: absolute !important;
21
        top: 0.75rem !important;
22
        right: 0.5rem !important;
23
        margin: 0;
24
        opacity: 1 !important;
25
        z-index: 10;
26
        pointer-events: none;
27
    }
28
}