Add parantheses to numbering style for Pandoc numbered example list in HTML

[adamiturabi]

Description

I just found out that Pandoc has an "Numbered example list" where examples can be listed using (@). See here for details:
https://pandoc.org/demo/example33/8.7-lists.html

Here is an example qmd:

---
title: "Quarto Basics"
format:
  html:
    subtitle: a
  pdf:
    keep-tex: true
    subtitle: a
---

Some text

1. Some text

   (@good)  Some example text
            Some translation

   (@)  Another example
        Another translation

1. Some text

   (@bad)  Some example text
           Some translation

   (@)  Another example
        Another translation

Using (@good) we can say bla. And using (@bad) we can say bla.

(@)  Another example

This works well out of the box for Latex. However, for HTML, the list numbering is rendered using a period after the number thus:

1. Some example text

Instead it should be rendered thus:

(1) Some example text

Using the parantheses around the number is useful in order to distinguish this "running" example list from other, regular, numbered lists. Otherwise, as in my standalone example above, the rendered output is confusing.

The generated HTML creates an ordered list with class="example". So maybe this can be implemented via CSS?

<ol class="example" type="1">
<li><p>Some example text<br>

Relevant issue:

• Feature Request: distinguish numbered lists and example lists in HTML jgm/pandoc#2524

[cderv]

However, for HTML, the list numbering is rendered using a period after the number thus:

It seems that Pandoc does render it this way. Take you doc and do

quarto pandoc -f markdown -t html -o index.html -s index.qmd

to render with bare pandoc, and we get

So it seems Pandoc CSS does not do the same as LaTeX.

I though it could be nested list, but it will do the same for first level item

---
title: "Quarto Basics"
format:
  html:
    subtitle: a
  pdf:
    keep-tex: true
    subtitle: a
---


(@good)  Some example text
         Some translation

(@)  Another example
        Another translation

(@bad)  Some example text
        Some translation

(@)  Another example
     Another translation

Using (@good) we can say bla. And using (@bad) we can say bla.

(@)  Another example

So I guess you need to tweak CSS to your liking.

Hope it helps

[cderv]

Example of SCSS you could use

/*-- scss:defaults --*/

ol.example {
  list-style: none;
  padding-left: 0;
}

ol.example li {
  position: relative;
  padding-left: 3em;
}

ol.example li::before {
  content: "(" counter(list-item) ") ";
  position: absolute;
  left: 0;
  width: 3em;
  text-align: left;
}

[adamiturabi]

Thank you @cderv ! This works great. I've added it to my css file.

Would this be something to add to Quarto's default css?