Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS:
body { counter-reset: h1; }
h1 { counter-reset: h2; }
h2 { counter-reset: h3; }
...
This format is achieved:
1. Heading number 1
1.1. Heading level 2
1.1.1. Heading level 3
...Desiring to convert this into a JavaScript function and eliminate the need for CSS as below:
if( typeof mbopts !== 'undefined' && mbopts.length > 0 ) {
var mbopts = {
levels: Int,
separator: String,
startAt: Int
};
}
$('#main').mbheaders(mbopts);
The JavaScript function would operate as follows:
(function(h) {
h.fn.mbheaders = function( mbopts ) {
let mbdefaults = {
levels: 6,
separator: "decimal",
startAt: 1
};
// Extend the defaults
let mboptions = h.extend( {}, mbdefaults, mbopts );
return this.each( function() {
// Function logic here to handle automatic numbering of headings
// based on specified options.
});
}
}( jQuery ));
This functionality is important for maintaining consistent numbering in documentation split across multiple files such as .md.
Example processed HTML from a markdown file:
<article class="markdown-section" id="main">
<h1 id="about-this-document">About this document</h1>
<h1 id="everyone">Everyone</h1>
<h2 id="logging-into-your-computer">Logging into your computer</h2>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
<h1 id="special-areas">Special areas</h1>
<h3 id="on-the-road">On the road</h3>
<h3 id="remote">Remote</h3>
</article>
Relevant output numbers obtained using the automatic heading numbering:
1. Everyone
1.1. Logging into your computer
2. Special areas
2.1. On the road
2.2. Remote