How to display the language syntax for each chunk?

[js2264]

Description

My .qmd file contains chunks with multiple languages. Each chunk is successfully rendered (and exectued!).

How can I have the language being used in each chunk automatically displayed, e.g. at the top corner? I know the |# filename = "python" trick but would prefer and automated way. I must be missing something, as some Quarto books seem to have this feature available.

An example from TileDB website (I believe to be built with Quarto, main repo here:

---
title: "Reproducible Quarto Document"
format:
  html:
    embed-resources: true
engine: knitr
---

Here is a `shell` chunk 

```{bash}
echo "Hi there!"
```

Here is a `python` chunk 

```{python}
print("Hello, world!")
```

And here is `R`!

```{R}
print(c("Bonjour!"))
```

[mcanouil]

You can make a Lua filter to set filename.

[js2264]

TileDB book does not seem to have any Lua filters set up, and it also does not seem to rely on |# filename = '...' to add the language label, so I suspect there would be another solution?

[mcanouil]

TileDB website has nothing to do with Quarto, it's Gatsby 4.25.7.
The display you show is some kind of tabset.

I told you how to do this kind of stuff in Quarto.

[js2264]

Thanks for clarifying that. So currently there is no pre-baked way to do this? If not, then I'll write up a filter, but I'd rather use an already existing solution.

[mcanouil]

Here is a simple Lua filter to add filename using the code cell language.

function CodeBlock(code)
  local lang = code.attr.classes[1] 
  if lang == "cell-code" then 
    _, _, matchedLang = string.find(code.text, "^`+%{%{([^%}]*)%}%}")
    lang = matchedLang or lang
  elseif lang ~= nil and lang:find('{{', 1, true) == 1 then
    _, _, matchedLang = string.find(lang, "{{+(.-)}}+")
    if matchedLang then
      lang = matchedLang
    end
  end
  return quarto.DecoratedCodeBlock({
    filename = lang,
    code_block = code:clone()
  })
end

[js2264]

Thanks @mcanouil this is really helpful!