Language name in code blocks

[pushbroomsweep]

Is it possible to include the language name in one corner (say the bottom-right corner) of the code blocks?

[niclasheinz]

Hi @pushbroomsweep

This is currently not available out-of-the-box. What you can do, however, is to first enable code highlighting and add a title in the code block.

Here is a sample of how you can easily add a Python label to Python code blocks using CSS:

.language-py .filename::after {
    content: " Python";
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #3572A5;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
}

This will look like this:

So that you can use my CSS you have to make sure to define py in the code block in my example. This is what my example looks like:

``` py title="bubble_sort.py"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
 _```

---

References:

• https://squidfunk.github.io/mkdocs-material/customization/?h=extra+css#additional-css

[kamilkrzyskow]

Nice solution, very ingenious 🤩

The highlight extension also has the auto_title option, which would use the title of the lexer as the title of the code block when none is given, simpler but also worse solution, still worth noting.

Since you've gone the extra mile to try it out yourself, then I'd say it's worth adding the whole example.zip to the answer, as this could also clear up some misunderstandings. However, there are people that won't download zips, because it's too much work, which I've re-learned recently that the code block / screenshot is king.

Since the CSS is additive, I tried a quick hack in the browser tools, one could define CSS variables for the exact language match, even a hook could be used to generate that from Pygments / PyMdown extensions:

.language-bash {
  --lang-name: "Bash";
  /* color, background could also be unique to the given language */
}

and then use attribute selectors to select the code blocks with a language, which would make it appear in the corner if the --lang-name is set, as empty content doesn't display the ::after element:

.highlight[class*="language-"]::after {
  background: green;
  content: var(--lang-name);
  display: block; /* enable full width and margin support */
  margin: -4em 1em 3em auto; /* position the language indicator and add gap below the code block */
  position: relative; /* enable z-index */
  width: fit-content; /* fit width instead of taking full width from display block */
}