feat(markdown): support custom display-name for fenced code blocks

[elecmonkey]

Description

This PR adds support for a display-name attribute on fenced code blocks.
With this option, users can override the default language label shown in the top-right corner of code blocks.

Example:

```foo {display-name="Bar"}
console.log("hello");
```

The code block will display 'Bar' as the label instead of the default 'foo'.

Linked Issues

Fixes #4951

[brc-dd]

LGTM, but not sure if we should do this instead of allowing specifying these globally. Because that part is meant to show the language, I don't think people should misuse it to write titles there. If one wants title, they can use https://vp.yuy1n.io/features.html#%F0%9F%AA%A7-title-bar

[elecmonkey]

LGTM, but not sure if we should do this instead of allowing specifying these globally. Because that part is meant to show the language, I don't think people should misuse it to write titles there. If one wants title, they can use https://vp.yuy1n.io/features.html#%F0%9F%AA%A7-title-bar

Really appreciate your response!

Let me explain why I submitted this PR. Here’s a scenario: users of ArkTS need to write ts after the triple backticks, because ArkTS follows the same syntax highlighting rules as TypeScript. However, their actual language is ArkTS — a subset of TS designed for a specific operating system.

Another possible example is SQL dialects. They often reuse the same sql highlighting, but authors might still want to indicate which specific dialect is being used. In such cases, I think this feature is useful.

I completely understand your point — people shouldn’t misuse the “language”. I’m looking forward to hearing more thoughts from you and the community. Needs more discussion!

[brc-dd]

Here’s a scenario: users of ArkTS need to write ts after the triple backticks, because ArkTS follows the same syntax highlighting rules as TypeScript.

They can use languageAlias:

import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    languageAlias: {
      arkts: 'ts'
    }
  }
})

https://stackblitz.com/edit/vite-cacyqx7p?file=docs/.vitepress/config.ts,docs/index.md

---

The issue is when there is space in the name. One possible solution can be to use _ and replace them with spaces while generating langLabel.

Well, the original issue was to respect/override the language's displayName. That's useful, for example, when you want to show ArkTS for all of the ```ts blocks. I think some configuration like this can be supported:

import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    languageLabel: {
      ts: 'Ark TS'
    },
  }
})

/*
Usage:

```ts
something
```

(all ts blocks) will be rendered with label "Ark TS"
*/

And,

import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    languageAlias: {
      ark_ts: 'ts'
    },
  }
})

/*
Usage:

```Ark_TS
something
```

(only Ark_TS blocks) will be rendered with label "Ark TS"

you can still have

```ts
something
```

which will be rendered with label "ts" 
*/

[elecmonkey]

Well, the original issue was to respect/override the language's displayName. That's useful, for example, when you want to show ArkTS for all of the ```ts blocks. I think some configuration like this can be supported:

import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    languageLabel: {
      ts: 'Ark TS'
    },
  }
})

/*
Usage:

```ts
something

(all ts blocks) will be rendered with label "Ark TS"
*/

And,

```ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    languageAlias: {
      ark_ts: 'ts'
    },
  }
})

/*
Usage:

```Ark_TS
something

(only Ark_TS blocks) will be rendered with label "Ark TS"

you can still have

something

which will be rendered with label "ts"
*/

It’s a more intuitive and concise way to indicate the language! I’m going to work on this approach.

Do you think we need consider the case where users actually want an underscore to appear in the language label? or we just ignore it?

[brc-dd]

I think it's fine to ignore that case. It only affects the displayed lang anyway. It won't break anything. We can adjust the behavior if someone has a use case to show underscore in language name.

[elecmonkey]

I’ve put together a basic implementation, hope it’s useful :-)

[elecmonkey]

Thanks for your review and merge. I love vitepress and really appreciate your contribution :-)