Generate TOC with each entry on it's own line

[ank0m]

Hello,

Need your help generating a proper formated TOC, please.

Within my config.toml I’ve put the following code:

  [markup.tableOfContents]
    endLevel = 3
    ordered = false
    startLevel = 2

In the project/layouts/shortcodes directory I’ve created a file table_of_contents.html which contains:

<div class="toc">
	{{ .Page.TableOfContents | replaceRE "<ul>[[:space:]]*<li>[[:space:]]*<ul>" "<ul>" | replaceRE "</ul>[[:space:]]*</li>[[:space:]]*</ul>" "</ul>" |  safeHTML }}
</div>

Now, when I decide to insert a TOC within my content I place {{< table_of_contents >}} in the corresponding file and get the TOC which results e. g. in:

Configuring each tool
vdirsyncer khal khard Todoman

The first line (Configuring each tool) is as expected but the second one fails as each word is a separate heading and therefore each word should be on it’s own line.

The HTML source code of the generated HTML file looks as follows:

<li><a href="[#configuring-each-tool](http://localhost:1313/log/2021/pim-setup/#configuring-each-tool)">Configuring each tool</a>
<ul>
<li><a href="[#vdirsyncer](http://localhost:1313/log/2021/pim-setup/#vdirsyncer)">vdirsyncer</a></li>
<li><a href="[#khal](http://localhost:1313/log/2021/pim-setup/#khal)">khal</a></li>
<li><a href="[#khard](http://localhost:1313/log/2021/pim-setup/#khard)">khard</a></li>
<li><a href="[#todoman](http://localhost:1313/log/2021/pim-setup/#todoman)">Todoman</a></li>
</ul>

Is there a way to force a line break after each TOC entry? I’ve tried adding a <br>
at different places within the file table_of_contents.html but sadly without look.

Thanks for taking the time to read my help request!

Best,
Frank

[jmooring]

What are you trying to achieve, and why? I ask because there may be a better way to handle this.

[ank0m]

Within my blog posts, below the H1 heading, I want to have a TOC where each entry is on it’s own line.

[jmooring]

Sorry, I still don’t understand.

This markdown:

## Section 1

### Section 1.1

### Section 1.2

## Section 2

Generates this HTML:

<div class="toc">
  <nav id="TableOfContents">
    <ul>
      <li>
        <a href="#section-1">Section 1</a>
        <ul>
          <li><a href="#section-11">Section 1.1</a></li>
          <li><a href="#section-12">Section 1.2</a></li>
        </ul>
      </li>
      <li><a href="#section-2">Section 2</a></li>
    </ul>
  </nav>
</div>

Which looks like this:

[ank0m]

The image you’ve used looks like I wanna have it generated.

My content file looks like

## Announcing JID via email
bla bla bla

### Needed code to make the magic happen
bla bla bla

### The result
bla bla bla

And the result is:

So the second line contains two ### headings and each of them should be on it’s own line.

[jmooring]

You need to share your project with us, because this is not the default behavior. Please post a link to the public repository for your project.

See:
https://discourse.gohugo.io/t/requesting-help/9132

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

[ank0m]

Sorry, no problem. Here you go:

My website:
https://hmbrg.xyz/log/2021/jabber-id-email-header/

SourceHut git repo containing the code:
https://git.sr.ht/~hmbrg/website/tree

[jmooring]

Your CSS contains:

nav li {display:inline-block}

No.

[ank0m]

Appending no did the trick \o/ thanks a lot for your help.