support filename for code block

[Sepush]

Is your feature request related to a problem? Please describe.

I wan't a feature to show dir/filename of current code.

Describe the solution you'd like

same as nuxt docs

may be we can add this on the top left

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

For now you can create some component like this:

<script setup lang="ts">
defineProps<{ title: string }>();
</script>

<template>
  <div :style="{ '--title': `'${title}'` }">
    <slot />
  </div>
</template>

<style scoped>
div :deep([class*='language-']:before) {
  content: var(--title);
}
</style>

Then in your markdown file you can to do:

<code-block title="index.ts">

```ts
console.log('hey there')
```

</code-block>

Demo: https://stackblitz.com/edit/vite-p9dak1

[Sepush]

For now you can create some component like this:

<script setup lang="ts">
defineProps<{ title: string }>();
</script>

<template>
  <div :style="{ '--title': `'${title}'` }">
    <slot />
  </div>
</template>

<style scoped>
div :deep([class*='language-']:before) {
  content: var(--title);
}
</style>

Then in your markdown file you can to do:

<code-block title="index.ts">

```ts
console.log('hey there')

```

Demo: https://stackblitz.com/edit/vite-p9dak1

Thanks a lot. I can use this solution as a workaround now.

[brc-dd]

Let's track this one too on #728. I have modified its title. We'll probably be supporting something like this (#728 (comment)) directly in markdown:

```ts [index.ts]
const a: number = 1
```

So it would work with bare code blocks too.