How to get level 3 headings in TOC extension?

[kanbeq]

Hi,
I need tertiary headers to appear in my TOC. Now the headings in the table of contents only show up to the second row. How to do it?
Example:

1. Headline 1
   1.1 Heading 11
   1.1.1 Header 111
   1.1.2 Header 112
2. Headline 2
   2.1 Headline 21
   2.1.1 Header 211
   2.1.2 Header 212

And so on...
Thank you in advance for your help.

[GiovanniSalmeri]

It should be easy enough to modify the extension in order to show the headings up to a certain (configurable) level. As soon as I have some minutes I will try!

[GiovanniSalmeri]

More or less it works, but tocLevel cannot currently exceed 3, because h4..h6 are not given an id (I do not know why...).

<?php
// modified TOC extension, https://github.com/datenstrom/yellow-extensions/tree/master/source/toc

class YellowToc {
    const VERSION = "0.8.5";
    public $yellow;         // access to API
    
    // Handle initialisation
    public function onLoad($yellow) {
        $this->yellow = $yellow;
        $this->yellow->system->setDefault("tocLevel", "3"); // shows headings up to nth level
        $this->yellow->system->setDefault("tocNumbering", "1"); // if 0 numbers are not added before headings
    }

    // Handle page content in HTML format
    public function onParseContentHtml($page, $text) {
        $callback = function ($matches) use ($page) {
            $output = "<ul class=\"toc\">\n";
            $location = $page->getPage("main")->getLocation(true);
            $rawData = $page->getPage("main")->parserData;
            preg_match_all("/<h(\d) id=\"([^\"]+)\">(.*?)<\/h\d>/i", $rawData, $matches, PREG_SET_ORDER);
            $levelNumbers = array_fill(2, 5, 0);
            $compoundNumber = "";
            foreach ($matches as $match) {
		if ($match[1] > 1 && $match[1] <= $this->yellow->system->get("tocLevel")) {
                    if ($this->yellow->system->get("tocNumbering")) {
                        $levelNumbers[(int)$match[1]] += 1;
                        for ($i = $match[1]+1; $i <= 6; $i++) {
                            $levelNumbers[$i] = 0;
                        }
                        $compoundNumber = implode(".", array_slice($levelNumbers, 0, $match[1]-1)).". ";
                    }
                    $class = $match[1] == 2 ? "" : " class=\"".str_repeat("sub", $match[1]-2)."item\"";
                    $output .= "<li$class><a href=\"$location#$match[2]\">$compoundNumber$match[3]</a></li>\n";
                }
            }
            $output .= "</ul>\n";
            return $output;
        };
        return preg_replace_callback("/<p>\[toc\]<\/p>\n/i", $callback, $text);
    }
}

[GiovanniSalmeri]

h4..h6 are not given an id (I do not know why...).

I answer to myself: h4..h6 are intentionally not given an automatic id in lines 3927 and 3937 of markdown.php:

        if (empty($attr) && $level>=2 && $level<=3) $attr = $this->getIdAttribute($text);

@markseu is there a compelling reason for this? or could this limitation be lifted?

[markseuffert]

TOC and Markdown work together, it's not a limitation rather that they work hand in hand.

[GiovanniSalmeri]

If the above lines in markdown.php were if (empty($attr)) $attr = $this->getIdAttribute($text);, the above modified toc extension would work 😊 (just tested). Perhaps it could be useful for example in case of documentation pages with deep subheadings. I think it would be possibile to get the same result without modifying markdown.php (the ids could be added with a onParseContentRaw, right?), but it would be a bit more complicated. But perhaps I am missing something else...

[kanbeq]

Thank you very much for your interest in the topic and for trying to solve it. 👍😉 In that version of the extension, I had everything classed well, and now I don't know how to keep it that nice.

[markseuffert]

I updated the Markdown extension for you, so that you can experiment with more headings.

[GiovanniSalmeri]

@markseu Thank you very much!

@kanbeq Now if you update your markdown.php extension and use the code that I posted as a modified toc.php extension, you should get what you wish. Remark that you have to adjust in system.ini these two new settings (if you leave the default values, the new toc should behave exactly like the old one!):

tocLevel: last level of h# shown by toc (the default is 3 (h2 and h3), write 4 if ypu want 3 levels (h2, h3 and h4), etc.)
tocNumbering: whether toc adds before the headings an automatic numbering (the default is 1 [= yes], write 0 [= no] if you do not want an automatic numbering to be added, for example because the headings already contain it).

If all seems OK, in the next days I will publish this modified toc (or I will propose as a modification of the old toc, if the core developers prefer this).

[kanbeq]

My point is that the previous version did differentiate between the level of headers (so I could set the padding for lower levels in css), and in your version I can't do that. And I don't know why my previous comment was deleted.

Edit: Thanks to markdown tweak by markseu, I was able to add a case to the old extension. And thanks to that, I have 3 TOC levels sufficient

<?php
// TOC extension, https://github.com/datenstrom/yellow-extensions/tree/master/source/toc

class YellowToc {
    const VERSION = "0.8.5";
    public $yellow;         // access to API
    
    // Handle initialisation
    public function onLoad($yellow) {
        $this->yellow = $yellow;
    }
    
    // Handle page content in HTML format
    public function onParseContentHtml($page, $text) {
        $callback = function ($matches) use ($page) {
            $output = "<ul class=\"toc\">\n<details>\n<summary>TOC</summary>\n";
            $major = $minor = $lower = 0;
            $location = $page->getPage("main")->getLocation(true);
            $rawData = $page->getPage("main")->parserData;
            preg_match_all("/<h(\d) id=\"([^\"]+)\">(.*?)<\/h\d>/i", $rawData, $matches, PREG_SET_ORDER);
            foreach ($matches as $match) {
                switch ($match[1]) {
                    case 2: ++$major; $minor = $lower = 0;
                            $output .= "<li><a href=\"$location#$match[2]\">$major. $match[3]</a></li>\n";
                            break;
                    case 3: ++$minor; $lower = 0;
                            $output .= "<li class=\"subitem\"><a href=\"$location#$match[2]\">$major.$minor. $match[3]</a></li>\n";
                            break;
                    case 4: ++$lower;
                            $output .= "<li class=\"subsubitem\"><a href=\"$location#$match[2]\">$major.$minor.$lower $match[3]</a></li>\n";
                            break;
                }
            }
            $output .= "</details>\n</ul>\n";
            return $output;
        };
        return preg_replace_callback("/<p>\[toc\]<\/p>\n/i", $callback, $text);
    }
}

[GiovanniSalmeri]

My point is that the previous version did differentiate between the level of headers (so I could set the padding for lower levels in css), and in your version I can't do that.

You are right, I overlooked the CSS classes in my version. It would be easy to add them [Edit: I just did it], but your modification solves your needs.

Perhaps the following two lines should be corrected like this?

                    case 2: ++$major; $minor = $lower = 0;
                    case 3: ++$minor; $lower = 0;

[kanbeq]

Yes you are right. I just noticed it a moment ago

[nevillepark]

Hi, I've also been experimenting with modifying the TOC extension! I have been trying to make sub-headings into nested lists, so

<h1>Some heading</h1>
<h2>A sub-heading</h2>
<h1>Next heading</h1>

would be rendered as

<ul>
  <li><a href="#some-heading">Some heading</a></li>
  <ul>
  	<li><a href="#a-sub-heading">A sub-heading</a></li>
  </ul>
  <li><a href="#next-heading">Next heading</a></li>
</ul>

and look like

• Some heading
  • A sub-heading
• Next heading

I tried to figure it out, but I can't actually code. So instead I resorted to styling sub-headings with CSS. However, I think this is how it might work:

• If the current heading level is lower than the previous one, output "<ul><li>…</li>\n"
• If it is equal to the previous one (or if there isn't a previous one), output "<li>…</li>\n"
• If it is higher than the previous one, output "</ul>\n<li>…</li>".

The numbered list setting could be greatly simplified by wrapping the list in <ol> instead of <ul>. You can get nested numbering by using a CSS counter.

Any help would be greatly appreciated. I'll also update here if I figure it out by myself.

Update: Done!

I used the settings from @GiovanniSalmeri's version, but used tocNumbering to wrap the list in <ol> or <ul> tags. It generates properly nested HTML lists. The numbering is done with CSS counters.

I had an absolute blast doing this! I learned a lot about for loops.

[markseuffert]

My point is that the previous version did differentiate between the level of headers (so I could set the padding for lower levels in css), and in your version I can't do that. And I don't know why my previous comment was deleted.

Oh this could have been me. I remember there was more information and I converted GitHub issues into GitHub discussions at that time. Can't remember how many, it was a few hundreds that I converted and edited at that time. If something got lost, it's 100% certain that I am to blame. Sorry about that.

Today I found your comment and I personally like the solution with the additional CSS classes. It's small and customisable. GitHub uses a similar solution in their TOC for Markdown files. I would be interested to add this to the existing toc extension. Any thoughts?

[markseuffert]

The toc extension now supports all headings (h2-h6) and additional CSS classes.