How to number sections with roman numerals?

[nurfatimaj]

Hello!

I discovered pagedown recently and got very excited. Following, the contribution guide #81, I am trying to customise my own template. I managed to somehow adjust the css rules and html template to my needs, but am stuck with section numbers. I need them to be roman. I found this resource that provides a JQuery plugin to convert arabic numbers to roman and a short example of how to implement it.

This is the element with the first section number:

<span class="header-section-number" data-ref="8164ef68-1f7b-4d2a-b606-9abd01341656">1</span>

So, following the example, I have downloaded the jquery.romannumerals.js file and added the following lines to my custom_template.html file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery.romannumerals.js"></script>
<script>
$$(document).ready(function() {
  $$('.header-section-number').romannumerals();
});
</script>

But it doesn't work. In fact, I am not sure I am using the JQuery correctly because even this bit doesn't work

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$$(document).ready(function() {
  $$('.header-section-number').addClass('roman');
});
</script>

When I examine the output the span with section number does not have additional class roman.

I only really know the basics of HTML, so not a very confident user. Therefore, I'd be grateful for any help on this!

[RLesur]

Hello @nurfatimaj,

The jQuery plugin you found is a wrapper incorporating a code originally written in plain (or vanilla) JavaScript (see http://blog.stevenlevithan.com/archives/javascript-roman-numeral-converter and this StackOverflow answer).

In this case, you don't need jQuery: the original function can be integrated in a Paged.js hook to convert the header section numbers.

Here is an example:

---
title: "Roman numbers"
output: 
  pagedown::html_paged:
    toc: true
---

```{js, echo=FALSE}
Paged.registerHandlers(class extends Paged.Handler {
  constructor(chunker, polisher, caller) {
      super(chunker, polisher, caller);
  }

  beforeParsed(content) {
    const sectionNumbers = content.querySelectorAll('.header-section-number, .toc-section-number');
    for (const el of sectionNumbers) {
      el.textContent = el.textContent
                         .split('.')
                         .map(this.romanize)
                         .join('.')

    }
  }

  // From http://blog.stevenlevithan.com/archives/javascript-roman-numeral-converter
  romanize(num) {
    if (isNaN(num))
        return NaN;
    var digits = String(+num).split(""),
        key = ["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM",
                 "","X","XX","XXX","XL","L","LX","LXX","LXXX","XC",
                 "","I","II","III","IV","V","VI","VII","VIII","IX"],
        roman = "",
        i = 3;
    while (i--)
        roman = (key[+digits.pop() + (i * 10)] || "") + roman;
    return Array(+digits.join("") + 1).join("M") + roman;
  }
});
```

# First section

Some text

# Second section

Some text