Snippets/Auto-number headings
< Snippets
 | |
|---|---|
| Language(s): | JavaScript, CSS |
| Compatible with: | MediaWiki 1.37+ (vector) |
Description
[edit]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
[edit]JS
[edit]/**
* 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
[edit]/**
* 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) " ";
}