How to create Table of Contents inside a tiddler?

[talha131]

How do I create table of contents from headings inside a Tiddler written in TiddlyWiki markup?

For example, markdown has couple of plugins that create TOC from headings, like [Visual Studio code Plugin](https://marketplace.visualstudio.com/items?itemName=joffreykern.markdown-toc).

Is there a macro or plugin available for TiddlyWiki?

[Jed Carty]

There are built-in TOC macros.

Documentation is here https://tiddlywiki.com/#Table-of-Contents%20Macros

[talha131]

Jed, to my understanding, the TOC macros use tags.

TiddlyWiki provides several macros for generating a tree of tiddler links by analysing tags

I want to create TOC for headings inside a tiddler

! Heading 1

Lorem Ispum

! Heading 2

Example text

[Jed Carty]

Oh, sorry I mis read that.

TOCs based on heading don't exist in the core and I am not sure if there are any plugins for it. There has been a lot of discussion around it and it isn't every going to be supported in the core and may not be possible to make it in a reasonable way.

[talha131]

Thank you Jed.

​

[TonyM]

talha131,

As jed says, there is no tool to do this, in part because we can not reliably place anchors (HTML) in the wiki we can jump to when we select the heading. Perhaps with a view to jumping to that point in a long tiddler. 

However if this is not your key requirement, perhaps you just want a list of headings to summarise the tiddler content, or to list the headings elsewhere, and link to the tiddler that contains them there is other options.

Let us know what you want the toc to do, rather than define it by an existing example like Visual Studio, because then we may have a solution despite the current limitations.

Regards

Tony

[Mohammad]

talha131;

 The philosophy of tiddler is the smallest meaningful chunk of contents. They are not for lengthy and huge amount of content.

If you get this philosophy you wont need to have table of contents from headings instead you will need table of content from tiddlers

and it was explained by Jed.

You can also use transclusion to build a lengthy tiddler from small tiddlers.

Good luck

[talha131]

Thank you TonyM for your response.

Let us know what you want the toc to do, rather than define it by an existing example like Visual Studio, because then we may have a solution despite the current limitations.

I had a long tiddler with several headings, say “Fish Shell Tips”. I do not want to link to the heading from sidebar or from other tiddler. Instead when I visit the “Fish Shell Tips”, I want to have a TOC on top of tiddler, for quick skimming and jumping to the required heading.

What I ended up doing, taking cue from answers this thread, was to the split the tiddler into smaller tiddlers and tagged them with fish-shell. Then I created a tiddler for the fish-shell tag and listed all tiddlers tagged with it inside it,

<<list-links "[tag[fish-shell]sort[title]]">>

Let me know if there is a better way. Also, you said,

However if this is not your key requirement, perhaps you just want a list of headings to summarise the tiddler content, or to list the headings elsewhere, and link to the tiddler that contains them there is other options.

How do I these? Like getting a list of headings or listing headings elsewhere?

​

[talha131]

Thank you Mohammad. I broke down my tiddler into smaller tiddlers with a common tag.

You can also use transclusion to build a lengthy tiddler from small tiddlers.

Transclusion is cool. But it’s a manual process. Every time I add a new tiddler, I will have to update the lengthy tiddler manually.

For example, I create a “Fish Shell Tips” tiddler, to show content of “Rename Files” tiddler.

! {{Rename Files !!title}}
{{Rename Files}}

Later, if I add another tiddler on the same topic, “Aliases and Functions”. I will have to remember to edit “Fish Shell Tips” tiddler and add the content

! {{Rename Files !!title}}
{{Rename Files}}

! {{Aliases and Functions !!title}}
{{Aliases and Functions}}

I don’t see any way of telling “Fish Shell Tips” to automatically transclude new content with tag “fish-shell”.

​

[Jed Carty]

You can transclude all the tiddlers like this:

<$list filter='[tag[shell-fish]]'>
<$transclude mode=block/>
</$list>

If you want to make the heading that shows the tiddler title you can do it like this:

<$list filter='[tag[shell-fish]]'>
!!{{!!title}}
<$transclude mode=block/>
</$list>

[TonyM]

I am working on making this possible. But the transclusion method is the best.

Given you are using transclusion do look at the excise editor toolbar buttons you will it useful. Just type in tge top tiddler and when ready with a section excise it.

Also you could use jeds second list with only the titles at the top if you want a toc like list, however as yet we cant make it jump to that position in the text.

I have some other ideas I will share if they work.

Enjoy tiddlywiki
Tony

[Mohammad]

Hi Talha131,

 See the solution by Jed, no need to do those things manually at all. Tiddlywiki will do it!

Cheers

Mohammad

[TonyM]

Talha,

To support what Mohammad said 

The philosophy of tiddler is the smallest meaningful chunk of contents. They are not for lengthy and huge amount of content.

If you get this philosophy you wont need to have table of contents from headings instead you will need table of content from tiddlers

and it was explained by Jed.

I made a gift for you, download and drag and drop the attached file onto TiddlyWiki

I have also dumped a PDF (incorrect pagination)  to illustrate what they will look like.

Start with the Tiddler 

Tiddler pre-transclude

(edit them to see how they look inside, then see

Tiddler post-transclude

I used the Editor ToolBar Excise tool with the tagging checked, to divide the first into the second by heading, but since they are now separate tiddlers the other examples show other formats, that are possible once they are individually tagged tiddlers including drag and drop re-ordering.

Then work though the remaining ones to see how even a few minutes work can make very good use of individual tiddlers.

Regards

Tony

[Mohammad]

Good job Tony!

[talha131]

Thank you Jed. This is very useful.

​

[talha131]

Thanks Tony. I am blown away by the capabilities of TiddlyWiki and level of help provided in the community. Really appreciated!

With the help of your code, I ended up with following, which solves my problem nicely.

@@float:right;
{{fish-shell||$:/core/ui/TagTemplate}} 
@@

<<tabs "[tag[fish-shell]sort[title]]" default:"" state:"$:/state/tab1" class:"tc-vertical">>

​

[TonyM]

Talah,

Thanks for the feedback, Happy to help, It is helpful when you say how you used an answer (as you did).

In fact you may be new but you just reminded me of @@float:right;@@ I need to use in something I am doing.

Helping each other is a virtuous circle, and when posted publicly also helps anyone else interested. Any healthy community can do this, and TidlyWiki is a health community.

Regards

Tony

[Adam]

Greetings everyone,

At one point Jed you say that this feature is never going to be in the core. Given how flexible TiddlyWiki is I wonder, why can't this be done? I am a noob but creating a reference point to a page doesn't seem too difficult. In my mind most webpages have links that reference other parts of them. Is this an executive decision from the dev team which means that this is not a priority or is this actually not possible?  I ask because you said that it is never going to be implemented which is kind of absolute. The same question goes also to Tony because you also mention that we cannot reliably place anchors.

I want to point out that I am not trying to refute you or anything, I just want to understand the reason, because as I said I am a noob and this topic seems very interesting. Initially I though this would be very easily implementable but when I saw your replies dozens of questions arose in my mind, that's all! I always thought that anything that exists in any webpage could be implemented in the TiddlyWiki given that it is a HTML file which can also be coded in Javascript.

Thank you,

Adam

[Mark S.]

Here's a link to Jeremy's comments:

https://groups.google.com/d/msg/tiddlywiki/QUXd3kG1pTQ/jMLgk_XvAQAJ

Or read the whole thread.

-- Mark

[TonyM]

Adam,

Such anchors are highly desirable, and a lot of people have being wanting this, but as I understand it the basic unit in TiddlyWiki is the tiddler, and the text wrapped in a html <pre></pre> and somehow this interferes.

TiddlyWiki is miraculous that "any change anywhere is immediately reflected everywhere" and deep in the code is an explanation for this problem.

Personally, "I would recognise people with more knowledge and experience know what they are talking about", but "try and find a way to prove them wrong. :)"

Its not possible to simply ask for a solution on this item anymore, "this is a case where we need to find one".

Regards

Tony

[Roger Ferrari]

TonyM, Hi there!

I was looking for a way to replicate wikipedias TOC and I think actually the way you showed with tabs (<<tabs "[tag<currentTiddler>]" "!Heading 1" "$:/state/tab1" class:"tc-vertical">>) is much better.

Though I would like to know if I could change the label it shows in the tabs, instead of the tiddler name, a short alias.

I will try to explain why. I am using tidllywiki to put info about a RPG world for my players, and I am writing about each city.

Each city will have History, Geography, Politics and so on. I can name the tiddlers with `city-name-history`for instance, but it is a very large name to show in the tab, whereas I would like to show just History.

Sorry my terrible english, if I wasn't clear enough let me know and I will try again. Anyway thanks for your time.

[Greg Davis]

Hi Roger,

Nornally if you add a caption field, to a tab tiddler, it will be shown on the tab instead of the tiddler's title.

I'll also suggest you add some type of link on each tab tiddler, to itself for easy future editing.

For a simple example of using tabs, see: http://tabbed-calendar.tiddlyspot.com

Hope that helps,
Greg

[TonyM]

Roger,

As greg says, the caption works well here and in a table of contents.

In additionto gregs idea about a link to each tiddler listed in the tabs, there is a plugin or two that do this automaticly. I will look it up and share it.

Tony

[TonyM]

The plugin I mentioned is Mario Pietsch's https://wikilabs.github.io/editions/link-to-tabs/

But there are others here https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM#z=lhnB8omnv6tna1qCW3_zGpKS under tabs

Regards

Tony