Create an article catalog with titles using content in markdown format, just like sf article catalog. How to create?

  ios, question

However, the content title of this Makdown format conversion process is converted into an h2 tag and has no id.
A format like this:

< h2 > title 1<h2 >
 ......
 ... content  ....
 ......
 < h2 > title 2<h2 >
 ......
 ... content  ....
 ......
 < h2 > title 3<h2 >
 ......

So we don’t need anchor points.
Is there any way to implement this directory without anchor points?

Js can be used to insert ids without ids.
This is how SF’s article catalogue is implemented.

clipboard.png

The front end extracts all h1, h2, h3 from the article to determine the directory structure after the page rendering is completed, and then adds a similar to each title.articleHeader1The id of the.

Some codes:

//Generate index
 function articleIndex() {
 var $article = $('.article');
 var $header = $article.find('h1, h2, h3');
 Var _ html =' < divclass = "panelpanel-defaultwidget-outline" > < divclass = "panel-heading" id = "hideooutline" > directory structure < span class = "text-mutepul-rightcaret" >  </span></div><div class="panel-body"><ul id="articleIndex"></ul></div></div>';
 $('.side').append(_html);
 $('.widget-outline').css({
 Width': $('.side').width () plus 15.
 //'left': $ ('.side'). offset (). left plus 15,
 });
 var _tagLevel = 1;  //Initial level
 var _$wrap = $('#articleIndex');  //Initial wrap
 $header.each(function(index) {
 If ($ (this). text (). trim () = = ='') {//empty title
 return;
 bracket
 $ (this). attr ('id',' articleheader' plus index);  //plus id
 var _tl = parseInt($(this)[0].tagName.slice(1));  //current tagLevel
 var _$li = null;
 If (index = = = 0 | | _ TL = = = _ taglevel) {//first or same as last
 _ $ Li = $ ('< Li > < a href = "# articleheader' plus index plus'" >' plus $(this).text () plus' < /a></li >');
 _$wrap.append(_$li);
 } else if(_tl > _tagLevel) {// the current is greater than the last
 _ $ Li = $ ('< ul > < Li > < a href = "# article header' plus index plus'" >' plus $(this).text () plus' < /a></li></ul >');
 _$wrap.append(_$li);
 _$wrap = _$li;
 } else if(_tl < _tagLevel) {// the current is less than the last
 _ $ Li = $ ('< Li > < a href = "# articleheader' plus index plus'" >' plus $(this).text () plus' < /a></li >');
 if(_tl === 1) {
 $('#articleIndex').append(_$li);
 _$wrap = $('#articleIndex');
 } else {
 _$wrap.parent('ul').append(_$li);
 _$wrap = _$wrap.parent('ul');
 bracket
 bracket
 _tagLevel = _tl;
 });
 bracket