Examples

Installation

To install this extension in your current directory (or into the Quarto project that you’re currently working in), use the following terminal command:

quarto add andrewheiss/language-name

This will install the extension in the _extensions subdirectory. If you’re using version control, you will want to check in this directory.

Enabling the extension

Enable the filter by including it in the YAML front matter:

---
title: Your title
filters:
  - language-name
---

Control when language names are visible

Document-wide

By default, the language name will be added to all language-specific blocks in the document. You can disable this with the show-all option in the YAML front matter:

---
title: Your title
filters:
  - language-name
language-name:
  show-all: false
---

In specific blocks

You can also enable or disable language names on a block-by-block basis with the show-language attribute, which can be either true or false. For instance:

Source

```{.r show-language="false"}
# No language name
x <- 1 + 1
```

Output

# No language name
x <- 1 + 1

Source

```{.r show-language="true"}
# Language name!
x <- 1 + 1
```

Output

# Language name!
x <- 1 + 1

Control language name

By default, the language will be converted to sentence case (i.e. first letter capitalized). This works for many languages, like R and Python. For example, this Python chunk renders with a title of “Python”:

Source

```{.python}
x = 1 + 1
```

Output

x = 1 + 1

For languages like YAML, though, the name will render as “Yaml”:

items:
  - thing 1
  - thing 2

You can control the text for the language name with the language-title option:

Source

```{.yaml language-title="YAML"}
items:
  - thing 1
  - thing 2
```

Output

items:
  - thing 1
  - thing 2

You can use whatever you want in the language-title option, like adding emojis or extra language details:

Output

x = 1 + 1

print x

print(x)

Source

```{.python language-title="🐍 Python (both 2 and 3)"}
x = 1 + 1
```

```{.python language-title="Python 2"}
print x
```

```{.python language-title="Python 3"}
print(x)
```

Here are some other examples:

Output

quarto preview document.qmd --no-browser

Source

```{.bash language-title="Terminal (sh)"}
quarto preview document.qmd --no-browser
```

Output

reg y x, robust

Source

```{.stata language-title="Stata ($$$)"}
reg y x, robust
```

Computational output

This also works with computational cells:

mean(1:5)

[1] 3

You can control options within computational cells as well using inline attributes. Here’s a custom language name:

Output

mean(1:5)

[1] 3

Source

```{r}
#| language-title: "R (the best)"

mean(1:5)
```

And here’s a chunk with no language name:

Output

mean(1:5)

[1] 3

Source

```{r}
#| show-language: false

mean(1:5)
```

It also works when using the filename attribute:

Output

analysis.R

mean(1:5)

[1] 3

Source

```{r}
#| language-title: "R (the best)"
#| filename: "analysis.R"

mean(1:5)
```

Adaptive color

The color of the language title and little border line should automatically adapt to whatever highlighting color scheme you’re using. It’s set to be at 80% opacity of the CSS variable --quarto-hl-co-color, which is used for code comments and code annotations and the copy button in code output.

Try toggling from dark to light mode to check: Switch between light/dark mode

# The language name should be the same as this color
x <- mean(1:5)

Custom colors

If you want to define your own colors, you can either (1) edit language-name.css in the extension folder directly or (2) you can add your own custom CSS in a separate file or injected through the include-in-header option in the YAML front matter.

The relevant CSS settings are at the end:

.codeblock-with-label pre::before {
  /* Other stuff */

  /* Color stuff. This uses a semi transparent version of Quarto's comment color 
  for syntax highlighting (--quarto-hl-co-color) */
  opacity: 0.8;
  color: var(--quarto-hl-co-color, #5E5E5E);
  border-bottom-color: var(--quarto-hl-co-color, #5E5E5E);
}

So you could, for instance, do this in a document:

---
title: Your title
filters:
  - language-name
format:
  html:
    include-in-header:
      - text: |
          <style type="text/css">
          .codeblock-with-label pre::before {
            color: red;
            border-bottom-color: green;
          }
          </style>
---