Is it possible to display the language of the code block in the top right corner of the code block?

[codersjj]

Like this:

see: https://vuejs.org/guide/introduction.html#single-file-components

[pomber]

You can try something like this with CSS:

.ch-codeblock [data-ch-lang]::after{
  content: attr(data-ch-lang);
  position: absolute;
  right: 10px;
  top: 10px;
}

playground

[codersjj]

Thank you for your answer, it's very helpful! Based on this, I added a few more lines of CSS to implement the effect when there is a copy button:

.ch-codeblock [data-ch-lang] + .ch-code-button,
.ch-codeblock [data-ch-lang]:has(+ .ch-code-button):hover::after,
.ch-codeblock:has([data-ch-lang] + .ch-code-button:hover) [data-ch-lang]::after {
  opacity: 0;
}

.ch-codeblock [data-ch-lang]:hover + .ch-code-button,
.ch-codeblock [data-ch-lang] + .ch-code-button:hover {
  opacity: 1;
}

.ch-codeblock [data-ch-lang] + .ch-code-button {
  transition: opacity .5s ease;
}

see: playground