Add ToC (aka. Table of Contents) for markdown engine

Ideas
1

ToC is useful when creating a table.
Please add support to it.

2

This is something that’s more likely to be available as a card in the upcoming Koenig editor.

3 Likes
3

Has this been added? Because I don’t seem to see how to do it still.

4

No. There would be an announcement and this topic would be closed if/when the feature was added.

It’s not in the current backlog but a long-term goal is allowing custom editor cards to be created and installed which would allow third parties to create this type of functionality.

5

A “table of content” card would be nice.

(I guess this would run into the same issues as the “footnotes card”: We’ll need a way for a card to interact with other cards)

6

First they would have to develop some form of anchor for a header, where an anchor gets a link on every post, then from there it would be very easy to impement.

The problem with the current way of using anchors is that we need some easy way of doing offset. All blogs that use the ghost theme has that navigation bar at the top of every page:

image
image1919×404 15.7 KB

So if you make a header in a markdown-card like this:

<h2 id="hello">This is a header</h2>

And you setup a link by typing some text and right click on that text and insert the link to #hello (your id from your header in the markdown-card, you get this effect (notice how the top bar covers the title):

image
image1919×111 6.93 KB

Now, this is how it is supposed to work, but with the Ghost theme, it just doesn’t fit in.

As for doing a ToC, it is pretty easy using LaTex, but I wouldn’t bother before they implement some easy way to offset links (which they probably won’t) :slight_smile:

Edit:
Right now it is possible for ‘cards’ (well, the outcome of them) to interact using links, but it really is just the offset issue, as I see it. Just put the link in a markdown-card like this:

<a href="#hello">Link</a>

Edit2:
This was the closest thing I could find, but we still have the offset issue. Maybe there is an easy fix, but the way I see it is just to set the .scrollTop = link_location-60px in some css, if that is at all possible. Then you would get the desired result.

Table of contents

  1. Introduction
  2. Some paragraph
    1. Sub paragraph
  3. Another paragraph

This is the introduction

Some introduction text, formatted in heading 2 style

Some paragraph

The first paragraph text

Sub paragraph

This is a sub paragraph, formatted in heading 3 style

Another paragraph

The second paragraph text

Copy-paste this into markdown card :)

# Table of contents
1. [Introduction](#introduction)
2. [Some paragraph](#paragraph1)
    1. [Sub paragraph](#subparagraph1)
3. [Another paragraph](#paragraph2)

## This is the introduction <a name="introduction"></a>
Some introduction text, formatted in heading 2 style

## Some paragraph <a name="paragraph1"></a>
The first paragraph text

### Sub paragraph <a name="subparagraph1"></a>
This is a sub paragraph, formatted in heading 3 style

## Another paragraph <a name="paragraph2"></a>
The second paragraph text
1 Like
7

All headers added via rich-text or though markdown already have an id="my-title" attribute added automatically (based on the header content) which can be used in ToC links like <a href="#my-title">My Title</a>.

There are numerous ways to generate a ToC with a client-side script, Automatic Table of Contents | CSS-Tricks - CSS-Tricks is a good tutorial covering the basics.

Alternatively if you’re using Ghost headless you can generate ToC’s in your static files, there’s an example component gatsby/react component in the source of our docs site

I wouldn’t bother before they implement some easy way to offset links (which they probably won’t) :slight_smile:

This is completely up to the theme developer, there are multiple JS approaches that can be taken depending on the particular use-case and desired behaviour.

1 Like
8

I agree, there are many JS approahces, but many people on here are just looking for a quick solution that they can do right in their editor. Personally, I haven’t personally gotten around to try and implement such a feature, but definitely excited for the new Ghost update!

I’m hoping that the theme developers adds it, but I would not assume they would, as there is probably bigger features that needs their time.

If you really would want a quickfix (quick-bad-SEO-fix), this would be it. Not recommended. But I say try it in a markdown-card and get a feel for what a solution could look like :slight_smile:

<h2 id="hiddenheader">This is a header</h2>

<style> #hiddenheader:target {display: block;position: relative; visibility: hidden; }</style>

<h2>The actual header</h2>

<a href="#hiddenheader">Link</a>
1 Like
9

Hey there! Found a solution :slight_smile:

2 Likes
11

Has there been any updates on this? I realize that this is a few years old now.