Snippets/Auto-number headings

How to use Snippets
List of Snippets

Auto-number headings
Language(s):	JavaScript , CSS
Compatible with:	MediaWiki 1.37+ (vector)

Description

Replace the "Auto-number headings" feature that previously existed in MediaWiki core (T284921).

This can be registered as a gadget on any wiki by copying the code below (or from MediaWiki:Gadget-autonum.js and MediaWiki:Gadget-autonum.css), and adding the following to MediaWiki:Gadgets-definition:

* autonum[ResourceLoader]|autonum.css|autonum.js

Code

JS

/**
 * Auto-number headings
 *
 * @source https://www.mediawiki.org/wiki/Snippets/Auto-number_headings
 * @author Krinkle
 * @version 2024-07-28
 */
var toc = document.querySelector('#toc');
if (toc) {
  document.body.classList.add('tpl-autonum-attr');
  // Support legacy Parser: <h2><span class=mw-headline id=…>
  // Support Parsoid: <section><div class=mw-heading><h2 id…>
  document.querySelectorAll('.mw-parser-output :is(h1,h2,h3,h4,h5,h6) .mw-headline[id], .mw-parser-output .mw-heading [id]:is(h1,h2,h3,h4,h5,h6)').forEach(function (headline) {
    var num = toc.querySelector('a[href="#' + CSS.escape(headline.id) + '"] .tocnumber');
    if (num) headline.setAttribute('data-autonum', num.textContent);
  });
} else {
  document.body.classList.add('tpl-autonum');
}

CSS

/**
 * Auto-number headings
 *
 * @source https://www.mediawiki.org/wiki/Snippets/Auto-number_headings
 * @author Krinkle
 * @version 2024-07-28
 */

/**
 * CSS mode:
 * Insert numbers on pages without a TOC. This could in principle work for all pages,
 * but to ensure consistency between the TOC and heading numbers we let JS follow
 * the TOC if there is one.
 */
.tpl-autonum .mw-parser-output {
  counter-reset: autonum-h2 autonum-h3 autonum-h4 autonum-h5 autonum-h6;
}
.tpl-autonum .mw-parser-output h2 {
  counter-reset: autonum-h3 autonum-h4 autonum-h5 autonum-h6;
}
.tpl-autonum .mw-parser-output h3 {
  counter-reset: autonum-h4 autonum-h5 autonum-h6;
}
.tpl-autonum .mw-parser-output h4 {
  counter-reset: autonum-h5 autonum-h6;
}
.tpl-autonum .mw-parser-output h5 {
  counter-reset: autonum-h6;
}
.tpl-autonum .mw-parser-output h2 .mw-headline:before,
.tpl-autonum .mw-parser-output .mw-heading h2:before {
  counter-increment: autonum-h2;
  content: counter(autonum-h2) " ";
}
.tpl-autonum .mw-parser-output h3 .mw-headline:before,
.tpl-autonum .mw-parser-output .mw-heading h3:before {
  counter-increment: autonum-h3;
  content: counter(autonum-h2) "." counter(autonum-h3) " ";
}
.tpl-autonum .mw-parser-output h4 .mw-headline:before,
.tpl-autonum .mw-parser-output .mw-heading h4:before {
  counter-increment: autonum-h4;
  content: counter(autonum-h2) "." counter(autonum-h3) "." counter(autonum-h4) " ";
}
.tpl-autonum .mw-parser-output h5 .mw-headline:before,
.tpl-autonum .mw-parser-output .mw-heading h5:before {
  counter-increment: autonum-h5;
  content: counter(autonum-h2) "." counter(autonum-h3) "." counter(autonum-h4) "." counter(autonum-h5) " ";
}
.tpl-autonum .mw-parser-output h6 .mw-headline:before,
.tpl-autonum .mw-parser-output .mw-heading h6:before {
  counter-increment: autonum-h6;
  content: counter(autonum-h2) "." counter(autonum-h3) "." counter(autonum-h4) "." counter(autonum-h5) "." counter(autonum-h6) " ";
}

/**
 * JS mode: When a TOC is present, autonum.js sets the data-autonum attribute
 * and we display that instead of an automatic counter.
 */
.tpl-autonum-attr .mw-parser-output .mw-headline[data-autonum]:before,
.tpl-autonum-attr .mw-parser-output h2[data-autonum]:before ,
.tpl-autonum-attr .mw-parser-output h3[data-autonum]:before ,
.tpl-autonum-attr .mw-parser-output h4[data-autonum]:before ,
.tpl-autonum-attr .mw-parser-output h5[data-autonum]:before ,
.tpl-autonum-attr .mw-parser-output h6[data-autonum]:before {
  content: attr(data-autonum) " ";
}