# TOC in Markdown editor as Joplin GUI element

**URL:** <https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327>\
**Category:** Features\
**Created:** [22 April 2022 17:09 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327 "2022-04-22T17:09:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![touly](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@touly](https://discourse.joplinapp.org/u/touly)\
**Post date:** [22 April 2022 17:09 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/1 "2022-04-22T17:09:30Z")

</div>

I primarily use the Markdown editor without additional preview function. Here I would like to have a GUI element that generates a clickable table of contents from the headings of the note. Visible on top only if the note has headings. Like this is possible with [toc] only that this is not included in Markdown itself but is part of Joplins GUI. Could also be pinnable as an option, so it stays visible when scrolling and also shows where you are in the document.

I had looked through the plugin list before, but could only find such for the renderer. Is there already something there?

---

<div class="post-metadata">

**Author:** ![CalebJohn](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/calebjohn/32/356_2.png) [@CalebJohn](https://discourse.joplinapp.org/u/CalebJohn)\
**Post date:** [22 April 2022 17:59 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/2 "2022-04-22T17:59:47Z")

</div>

You're looking for the [Joplin Outline Plugin](https://github.com/cqroot/joplin-outline#readme). You can find it in the joplin plugin install list (Tools -\> Options -\> Plugin or Joplin -\> Preferences -\> Plugins) by searching for "Outline" or "TOC".

---

<div class="post-metadata">

**Author:** ![touly](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@touly](https://discourse.joplinapp.org/u/touly)\
**Post date:** [22 April 2022 18:14 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/3 "2022-04-22T18:14:35Z")

</div>

Ah nice. Thank you. But it seems not to save its width. Here it uses half of the editors screen. Which makes it not usable for me. And also ignores headers like:

```auto
header
---------

header
=====

```

EDIT: Yes, the header point is also mentioned in its readme.

---

<div class="post-metadata">

**Author:** ![touly](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@touly](https://discourse.joplinapp.org/u/touly)\
**Post date:** [25 April 2022 14:48 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/4 "2022-04-25T14:48:23Z")

</div>

Is there a solution to fix the width of the TOC element?

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [25 April 2022 17:31 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/5 "2022-04-25T17:31:32Z")

</div>

You can use the CSS class `.table-of-contents` in your userstyle.css file.

For example:

```auto

.table-of-contents {
  width: 300px;
}

```

---

<div class="post-metadata">

**Author:** ![touly](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@touly](https://discourse.joplinapp.org/u/touly)\
**Post date:** [26 April 2022 09:39 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/6 "2022-04-26T09:39:13Z")

</div>

That does not work here. I also can't find that class in Joplin's DOM.

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [26 April 2022 10:25 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/7 "2022-04-26T10:25:44Z")

</div>

Oh sorry! it's my bad! I didn't realize that you are using the outline plugin. My suggestion is only work on the TOC feature which is enable from the Tools \> Options \> Markdown \> Enable table of contents extension.

By the way, I don't understand what means of you said "fix the width". Once you slide the edge of the outline plugin window, the size is always be fixed. And the TOC content is also limit by the window size.

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [26 April 2022 10:30 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/8 "2022-04-26T10:30:22Z")

</div>

I think the issue is when you toggle it (it even provides a shortcut on f9). You resize it once but if you toggle it off and on again it doesn't store the layout information and takes up 50% of what was just the note pane's width.

---

<div class="post-metadata">

**Author:** ![Nacandev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/nacandev/32/11062_2.png) [@Nacandev](https://discourse.joplinapp.org/u/Nacandev)\
**Post date:** [26 April 2022 11:30 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/9 "2022-04-26T11:30:31Z")

</div>

If the case is exactly what @Daeraxa said:

> I think the issue is when you toggle it (it even provides a shortcut on f9). You resize it once but if you toggle it off and on again it doesn't store the layout information and takes up 50% of what was just the note pane's width.

I think I can give you an other suggestion but it's just an alternative.

You can go to `View > Change Application Layout`, and then move the outline plugin window to the same column as notebook panel or notelist panel. Then, the width will be finally limit by the notebook panel or notelist panel.

---

<div class="post-metadata">

**Author:** ![touly](https://avatars.discourse-cdn.com/v4/letter/t/e9a140/32.png) [@touly](https://discourse.joplinapp.org/u/touly)\
**Post date:** [26 April 2022 18:33 UTC](https://discourse.joplinapp.org/t/toc-in-markdown-editor-as-joplin-gui-element/25327/10 "2022-04-26T18:33:29Z")

</div>

Ok, I disabled the auto hide feature. That helped. Everything else leads to wrong sizes and jumping around. And I don't want the table of contents to show between notebooks and notes. It's not really logical from the layout, and it's inconvenient if the notes panel jumps all the time when switching between notes with headings and without.

Thank you very much for your help, Nacandev & Daeraxa 👍