Remove automatic item listing in toc for html (custom html template)

[arcaldwell49]

TL;DR how do I get the list items (<li>) removed from the toc rendered by quarto?

I am working on a custom html template which is an update from an old Rmarkdown template I developed (see the simplehtml.html file). I pretty much have everything working now on quarto template repository except I can't get the table of contents to render the way I want it to.

In the template file, I have the following code:

$if(toc)$
<div id="toc" class="sidenav">
  <!--
<button type="button" class="close">×</button>
-->
$toc$
</div>
$endif$

When I render the template as html file the toc populates as the following:

<div id="toc" class="sidenav">
<ul>
<li><a href="#introduction" id="toc-introduction"> <span class="header-section-number">1</span> Introduction</a></li>
<li><a href="#methods" id="toc-methods"> <span class="header-section-number">2</span> Methods</a></li>
<li><a href="#results" id="toc-results"> <span class="header-section-number">3</span> Results</a></li>
<li><a href="#discussion" id="toc-discussion"> <span class="header-section-number">4</span> Discussion</a></li>
<li><a href="#additional-information" id="toc-additional-information"> <span class="header-section-number">5</span> Additional Information</a></li>
<li><a href="#references" id="toc-references"> <span class="header-section-number">6</span> References</a></li>
</ul>
</div>

This is great but the the way the html renders the listed items look clunky. If I remove the

bits the layout looks much better (especially on mobile)

So, does anyone know what partial file or modification to the template that I need to make to get quarto to render the file as this instead?

<div id="toc" class="sidenav">
<ul>
<a href="#introduction" id="toc-introduction"> <span class="header-section-number">1</span> Introduction</a>
<a href="#methods" id="toc-methods"> <span class="header-section-number">2</span> Methods</a>
<a href="#results" id="toc-results"> <span class="header-section-number">3</span> Results</a>
<a href="#discussion" id="toc-discussion"> <span class="header-section-number">4</span> Discussion</a>
<a href="#additional-information" id="toc-additional-information"> <span class="header-section-number">5</span> Additional Information</a>
<a href="#references" id="toc-references"> <span class="header-section-number">6</span> References</a>
</ul>
</div>

Cheers,

Aaron

[cscheid]

That HTML syntax you want is not a valid list: <ul> elements need to have <li> children. So you can't do what you want, because Pandoc will not emit such lists. However, you can remove the decorations with CSS, by using https://developer.mozilla.org/en-US/docs/Web/CSS/list-style .

[arcaldwell49]

Perfect, ul { list-style: none;} does the trick it seems.