liquid script to generate simple table of contents from markdown

toc-page.css

/* example CSS for TOC */

div.page-toc {
  text-align: left;
}

div.page-toc a {
  text-decoration: none;
  color: inherit;
}

div.page-toc a:hover {
  border-bottom: 3px dotted;
}

div.page-toc ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0.8em;
  line-height: 0.8em;
  margin-left: 12px;
  font-family: "Arial", sans-serif;
}

div.page-toc > ul {
  margin-left: 0;
  font-size: 1.3em;
  line-height: 1.3em;
  font-family: "Arial Black", sans-serif;
}

toc-page.liquid

{% assign lines = include.content | default: page.content | newline_to_br | split: "<br />" %}
{% assign links = include.links | default: true %}

{% capture markdown %}

{% for line in lines %}
  {% assign letter = line | strip | slice: 0 %}
  {% if letter == "#" %}
    {% assign left_space = line | split: " " | first | replace: "#", "  ." | strip | replace: ".", "" %}
    {% assign line_text = line | replace: "#", " " | strip %}
    {% if links %}
      {% assign line_slug = line_text | slugify | prepend: "#" %}
{{ left_space }}- [{{ line_text }}]({{ line_slug }})
    {% else %}
{{ left_space }}- {{ line_text }}
    {% endif %}
  {% endif %}
{% endfor %}

{% endcapture %}<div class="page-toc">{{ markdown | strip | markdownify }}</div>

toc-page.md

layout
page

{% include toc-page.liquid %}

---

Fruits

Blah, blah, blah.

Apple

Blah, blah, blah.

Grape

Blah, blah, blah.

Orange

Blah, blah, blah.

Woods

Blah, blah, blah.

Hardwoods

Blah, blah, blah.

Hickory

Blah, blah, blah.

Maple

Blah, blah, blah.

Oak

Blah, blah, blah.

Poplar

Blah, blah, blah.

Softwoods

Blah, blah, blah.

Cedar

Blah, blah, blah.

Larch

Blah, blah, blah.

Pine

Blah, blah, blah.