# Get markdown headline from $page-\>text() to genereate list of content

**URL:** <https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192>\
**Category:** Questions\
**Tags:** v2\
**Created:** [February 2, 2016, 12:17pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192 "2016-02-02T12:17:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![carstengrimm](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/carstengrimm/32/188_2.png) [@carstengrimm](https://forum.getkirby.com/u/carstengrimm)\
**Post date:** [February 2, 2016, 12:17pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/1 "2016-02-02T12:17:56Z")

</div>

I wonder if it’s possible to have some kind of automatic headline list from my markdown text…

for example what i am trying to accomplish is, when writing a very long article with multiple h2, h3, h4 markdown tags to have an automated way to list some sort of index based on headlines so a viewer can jump right into the topic of choice.

so basically the script is reading the $page-\>text() field and identifies each

## headline2

### headline3

#### headline4

tag and generates a list with id hopping links towards each headline.

can anyone pinpoint in a direction ?

---

<div class="post-metadata">

**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\
**Post date:** [February 2, 2016, 12:27pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/2 "2016-02-02T12:27:47Z")

</div>

Yes, that is possible. The Kirby site uses this to display a table of contents above the docs pages.  
The code that does this is the [toc plugin](https://github.com/getkirby/getkirby.com/blob/master/site/plugins/toc/toc.php). Every occurrence of `(toc)` inside your Kirbytext content will then be replaced dynamically. You can extend the plugin to work with `h3` and `h4`.

---

<div class="post-metadata">

**Author:** ![carstengrimm](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/carstengrimm/32/188_2.png) [@carstengrimm](https://forum.getkirby.com/u/carstengrimm)\
**Post date:** [February 2, 2016, 12:37pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/3 "2016-02-02T12:37:39Z")

</div>

i tried that. looks like what i am searching for. can this also work in form of implementing it somewhere within my template rather than using kirbytext (toc)?

---

<div class="post-metadata">

**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\
**Post date:** [February 2, 2016, 2:33pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/4 "2016-02-02T14:33:34Z")

</div>

The Kirbytext post filter needs access to the Kirbytext content. What you can do is to prepend the table of contents instead of replacing the placeholder inside the filter. Then you wouldn’t need the placeholder in the content.

If the table of contents needs to be somewhere else on the page, you can modify the function to be not a filter but a normal function and pass the rendered Kirbytext content as an argument manually.

---

<div class="post-metadata">

**Author:** ![carstengrimm](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/carstengrimm/32/188_2.png) [@carstengrimm](https://forum.getkirby.com/u/carstengrimm)\
**Post date:** [February 2, 2016, 5:29pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/5 "2016-02-02T17:29:54Z")

</div>

got it into my template, just how to add the correct “id” tag to the each h2 headline so it’ll actually jump to each #link

---

<div class="post-metadata">

**Author:** ![oliverschneider](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/oliverschneider/32/4650_2.png) [@oliverschneider](https://forum.getkirby.com/u/oliverschneider)\
**Post date:** [February 2, 2016, 5:34pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/6 "2016-02-02T17:34:41Z")

</div>

That’s a good question that came to my mind too. I couldn’t figure it out although [getkirby.com](http://getkirby.com) does have the id-attributes. They are not within the textfile, anyone an idea how they are generated? @sashtown?

---

<div class="post-metadata">

**Author:** ![sashtown](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/sashtown/32/6098_2.png) [@sashtown](https://forum.getkirby.com/u/sashtown)\
**Post date:** [February 2, 2016, 6:13pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/7 "2016-02-02T18:13:55Z")

</div>

You can achieve that with [a few lines of JS](https://github.com/getkirby/getkirby.com/blob/master/assets/js/src/templates/docs.js). 🙂

---

<div class="post-metadata">

**Author:** ![carstengrimm](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/carstengrimm/32/188_2.png) [@carstengrimm](https://forum.getkirby.com/u/carstengrimm)\
**Post date:** [February 2, 2016, 6:32pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/8 "2016-02-02T18:32:41Z")

</div>

can’t get the js to worK ☹

---

<div class="post-metadata">

**Author:** ![oliverschneider](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/oliverschneider/32/4650_2.png) [@oliverschneider](https://forum.getkirby.com/u/oliverschneider)\
**Post date:** [February 2, 2016, 6:38pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/9 "2016-02-02T18:38:41Z")

</div>

Works perfectly for me, thank you @sashtown. @carstengrimm: Did you change the jquery selectors to match your html code? My headings are in .main-content not in .text so I changed the code. I added German Umlauts too:

```
$('.main-content h2, 
   .main-content h3, 
   .main-content h4, 
   .main-content h5, 
   .main-content h6').each(function() {
          var anchor = $(this).text()
                                   .replace(/[\-\[\]\/\{\}\(\)\*\+\?\!\.\,\:\=\\\^\$\'\&\%\|]/g, '')
                                   .replace(/\s/g,'-')
                                   .replace(/\u00c4/g, "Ae")
                                   .replace(/\u00d6/g, "Oe")
                                   .replace(/\u00dc/g, "Ue")
                                   .replace(/\u00e4/g, "ae")
                                   .replace(/\u00f6/g, "oe")
                                   .replace(/\u00fc/g, "ue")
                                   .replace(/\u00df/g, "ss");
      $(this).attr('id',anchor.toLowerCase());
 }
);
```

---

<div class="post-metadata">

**Author:** ![lukasbestle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukasbestle/32/11437_2.png) [@lukasbestle](https://forum.getkirby.com/u/lukasbestle)\
**Post date:** [February 2, 2016, 6:51pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/10 "2016-02-02T18:51:07Z")

</div>

If you wanted, you could also add the IDs directly in the Kirbytext post filter. That would require a bit more of string parsing though.

---

<div class="post-metadata">

**Author:** ![carstengrimm](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/carstengrimm/32/188_2.png) [@carstengrimm](https://forum.getkirby.com/u/carstengrimm)\
**Post date:** [February 2, 2016, 6:54pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/11 "2016-02-02T18:54:50Z")

</div>

> [@oliverschneider](#):
>
> $(‘.main-content h2,  
> .main-content h3,  
> .main-content h4,  
> .main-content h5,  
> .main-content h6’).each(function() {  
> var anchor = $(this).text()  
> .replace(/[-/{}()\*+?!.,:=\^$'&%|]/g, ‘’)  
> .replace(/\s/g,‘-’)  
> .replace(/\u00c4/g, “Ae”)  
> .replace(/\u00d6/g, “Oe”)  
> .replace(/\u00dc/g, “Ue”)  
> .replace(/\u00e4/g, “ae”)  
> .replace(/\u00f6/g, “oe”)  
> .replace(/\u00fc/g, “ue”)  
> .replace(/\u00df/g, “ss”);  
> $(this).attr(‘id’,anchor.toLowerCase());  
> }  
> );

Template File:

```
\<?php echo $page-\>text()-\>kt() ?\>
```

End of Footer before Body Tag:

```

```

No ID tags showing… and no jumping.

---

<div class="post-metadata">

**Author:** ![oliverschneider](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/oliverschneider/32/4650_2.png) [@oliverschneider](https://forum.getkirby.com/u/oliverschneider)\
**Post date:** [February 2, 2016, 7:24pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/12 "2016-02-02T19:24:53Z")

</div>

Do you have a live version of your example where we can check the running code?

---

<div class="post-metadata">

**Author:** ![carstengrimm](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/carstengrimm/32/188_2.png) [@carstengrimm](https://forum.getkirby.com/u/carstengrimm)\
**Post date:** [February 5, 2016, 1:59pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/13 "2016-02-05T13:59:54Z")

</div>

still can’t get it to work ☹

---

<div class="post-metadata">

**Author:** ![oliverschneider](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/oliverschneider/32/4650_2.png) [@oliverschneider](https://forum.getkirby.com/u/oliverschneider)\
**Post date:** [February 7, 2016, 2:10pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/14 "2016-02-07T14:10:09Z")

</div>

I can look into your code, if you want to, but you would have to send it completely or give me a link to a live version on your server.

---

<div class="post-metadata">

**Author:** ![carstengrimm](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/carstengrimm/32/188_2.png) [@carstengrimm](https://forum.getkirby.com/u/carstengrimm)\
**Post date:** [February 7, 2016, 2:21pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/15 "2016-02-07T14:21:59Z")

</div>

i sent you via pm the other day.

---

<div class="post-metadata">

**Author:** ![saljut7](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@saljut7](https://forum.getkirby.com/u/saljut7)\
**Post date:** [April 12, 2017, 5:16pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/16 "2017-04-12T17:16:30Z")

</div>

> [@lukasbestle](#):
>
> Yes, that is possible. The Kirby site uses this to display a table of contents above the docs pages.  
> The code that does this is the [toc plugin](https://github.com/getkirby/getkirby.com/blob/master/site/plugins/toc/toc.php). Every occurrence of `(toc)` inside your Kirbytext content will then be replaced dynamically. You can extend the plugin to work with `h3` and `h4`.

Thanks for this. How can I use this plugin when using the kirby starterkit 2.4.1?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 12, 2017, 5:30pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/17 "2017-04-12T17:30:40Z")

</div>

> [@saljut7](#):
>
> How can I use this plugin when using the kirby starterkit 2.4.1?

Copy the code and save it in `/site/plugins/toc/toc.php`.

Use in a field, that you output using the `kirbytext()` method, usually the main textarea field.

---

<div class="post-metadata">

**Author:** ![saljut7](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@saljut7](https://forum.getkirby.com/u/saljut7)\
**Post date:** [April 12, 2017, 6:45pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/18 "2017-04-12T18:45:15Z")

</div>

> [@texnixe](#):
>
> Copy the code and save it in `/site/plugins/toc/toc.php`.
> 
> Use in a field, that you output using the `kirbytext()` method, usually the main textarea field.

Thanks a lot. Sorry for asking again but: what do you mean with “field”, the `.txt` containing the headlines I want to generate the TOC of?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 12, 2017, 6:54pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/19 "2017-04-12T18:54:20Z")

</div>

Maybe an example works best: [https://github.com/getkirby/getkirby.com/blob/master/content/1-docs/8-cookbook/0-ajax-load-more/cookbook-section.txt](https://github.com/getkirby/getkirby.com/blob/master/content/1-docs/8-cookbook/0-ajax-load-more/cookbook-section.txt)

Result: [https://getkirby.com/docs/cookbook/ajax-load-more](https://getkirby.com/docs/cookbook/ajax-load-more)

And well, the field in the text file, that contains the headlines, in this case the text field. A .txt file usually contains several fields, like the title, a text field, maybe a date field etc.

---

<div class="post-metadata">

**Author:** ![saljut7](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@saljut7](https://forum.getkirby.com/u/saljut7)\
**Post date:** [April 12, 2017, 7:08pm UTC](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192/20 "2017-04-12T19:08:48Z")

</div>

> [@texnixe](#):
>
> Maybe an example works best: [https://github.com/getkirby/getkirby.com/blob/master/content/1-docs/8-cookbook/0-ajax-load-more/cookbook-section.txt](https://github.com/getkirby/getkirby.com/blob/master/content/1-docs/8-cookbook/0-ajax-load-more/cookbook-section.txt)
> 
> Result: [https://getkirby.com/docs/cookbook/ajax-load-more](https://getkirby.com/docs/cookbook/ajax-load-more)
> 
> And well, the field in the text file, that contains the headlines, in this case the text field. A .txt file usually contains several fields, like the title, a text field, maybe a date field etc.

Thx, unfortunately providing

```auto
----
Text:
(toc)
[...]

```

like in [https://github.com/getkirby/getkirby.com/blob/master/content/1-docs/8-cookbook/0-ajax-load-more/cookbook-section.txt](https://github.com/getkirby/getkirby.com/blob/master/content/1-docs/8-cookbook/0-ajax-load-more/cookbook-section.txt) just displays “(toc)” on my page (followed by the text content).

EDIT: sorry, **works now**. Forgot to provide the toc.php again. 😬

[Next page](https://forum.getkirby.com/t/get-markdown-headline-from-page-text-to-genereate-list-of-content/3192.md?page=2)