Userscript for Numbered Notion Headings

README.md

1. Install tampermonkey browser extension

2. Click here to install this user script

3. Open Notion

When you add headings to notion you should see this

Notion Numbered Headings-2025-10-06.user.js

// ==UserScript==
// @name         Notion Numbered Headings
// @namespace    http://tampermonkey.net/
// @version      2025-10-06
// @description  Add hierarchical numbering to Notion headings (H2-H4 + bold-only as H5) using almost only CSS
// @author       chriscz (https://github.com/chriscz)
// @match        https://www.notion.so/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=notion.so
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement('style');
    style.type = 'text/css';

    style.innerHTML = `
        /* Initialize all counters at the root level */
        .notion-page-content {
            counter-reset: h2-counter h3-counter h4-counter h5-counter;
        }

        /* Increment counters for each heading level */
        .notion-page-content h2 { counter-increment: h2-counter; }
        .notion-page-content h3 { counter-increment: h3-counter; }
        .notion-page-content h4 { counter-increment: h4-counter; }

        /* Reset deeper level counters when a heading appears */
        .notion-page-content > div:has(h2) { counter-reset: h3-counter h4-counter h5-counter; }
        .notion-page-content > div:has(h3) { counter-reset: h4-counter h5-counter; }
        .notion-page-content > div:has(h4) { counter-reset: h5-counter; }

        /* Bold-only elements (H5) */
        .notion-page-content div.notranslate > span[style*="font-weight:600"][data-token-index="0"]:only-child {
            counter-increment: h5-counter;
        }

        /* Display numbering */
        .notion-page-content h2::before {
            content: counter(h2-counter) ". ";
            font-weight: bold;
        }

        .notion-page-content h3::before {
            content: counter(h2-counter) "." counter(h3-counter) " ";
            font-weight: bold;
        }

        .notion-page-content h4::before {
            content: counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) " ";
            font-weight: bold;
        }

        /* Bold span numbering - uncomment to enable */
        /*
        .notion-page-content div.notranslate > span[style*="font-weight:600"][data-token-index="0"]:only-child::before {
            content: counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) " ";
            font-weight: bold;
        }
        */
    `;

    document.head.appendChild(style);
})();

screenshot.png