# Any outline option (like the one in Typora)

**URL:** <https://discourse.joplinapp.org/t/any-outline-option-like-the-one-in-typora/12766>\
**Category:** Support\
**Created:** [29 November 2020 10:47 UTC](https://discourse.joplinapp.org/t/any-outline-option-like-the-one-in-typora/12766 "2020-11-29T10:47:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cherukumanish](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/cherukumanish/32/5930_2.png) [@cherukumanish](https://discourse.joplinapp.org/u/cherukumanish)\
**Post date:** [29 November 2020 10:47 UTC](https://discourse.joplinapp.org/t/any-outline-option-like-the-one-in-typora/12766/1 "2020-11-29T10:47:03Z")

</div>

- Switched from Typora to Joplin recently.

- Would be great if the dev's can add outline option if possible.(when you have many headings in note, tough to switch to desired one with a scrolling option)

- Or is there any plugin or any other way i can enable it ???

---

<div class="post-metadata">

**Author:** ![Prinplup](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/prinplup/32/19037_2.png) [@Prinplup](https://discourse.joplinapp.org/u/Prinplup)\
**Post date:** [29 November 2020 11:43 UTC](https://discourse.joplinapp.org/t/any-outline-option-like-the-one-in-typora/12766/2 "2020-11-29T11:43:09Z")

</div>

Some people modify their userstyle.css to a similar effect (see this [thread](https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/34)). However, I agree that a proper outline feature would be useful, and even think Typora handles it beautifully (by making it the secondary mode for the sidebar).

---

<div class="post-metadata">

**Author:** ![cherukumanish](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/cherukumanish/32/5930_2.png) [@cherukumanish](https://discourse.joplinapp.org/u/cherukumanish)\
**Post date:** [29 November 2020 12:26 UTC](https://discourse.joplinapp.org/t/any-outline-option-like-the-one-in-typora/12766/3 "2020-11-29T12:26:43Z")

</div>

Edited userstyle.css -- (Quit the app & opened it. Isn't working?? (New to CSS)

[toc]

nav.table-of-contents ul {  
list-style-type: none;  
margin-top: 0px;  
margin-bottom: 0px;

}

nav.table-of-contents\>ul {

```
top: 5px;
right: 0px;
z-index: 99;

font-size: 12px;
position: fixed;
padding: 15px;

border-radius: 10px 0px 0px 10px;
margin: 0px;

overflow: hidden;
height: 90%;
width: 5px;
transition: .2s;

```

}

nav.table-of-contents::after {  
content: "[TOC - move your cursor to the right edge]";  
color: black;  
}

nav.table-of-contents\>ul:hover {  
background: #F8F8F8;  
box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15);

```
width: 30%;
color: none;
overflow: scroll;

```

}

nav.table-of-contents\>ul:hover::before {  
content: "TABLE OF CONTENTS"  
}

nav.table-of-contents\>ul:hover li {  
display: list-item;  
}

nav.table-of-contents li {  
display: none;  
white-space: nowrap;  
overflow: hidden;  
margin: 0px;  
padding: 0px;  
}

```
#rendered-md {
width: 100%;
}

```

}

---

<div class="post-metadata">

**Author:** ![Prinplup](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/prinplup/32/19037_2.png) [@Prinplup](https://discourse.joplinapp.org/u/Prinplup)\
**Post date:** [29 November 2020 13:34 UTC](https://discourse.joplinapp.org/t/any-outline-option-like-the-one-in-typora/12766/4 "2020-11-29T13:34:36Z")

</div>

I haven't done it myself, maybe someone else can help. As far as I understood, you'll have to:

- Edit userstyle.css, restart Joplin
- Include the text "[toc]" _in the document you're editing_ (not in the userstyle.css)
- Switch to the "viewer" mode (I don't think it shows up while editing)

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [29 November 2020 21:49 UTC](https://discourse.joplinapp.org/t/any-outline-option-like-the-one-in-typora/12766/5 "2020-11-29T21:49:39Z")

</div>

To clarify a few things.

`Preferences -> Markdown -> Enable table of contents extension (wysiwyg: no)`

No CSS is necessary to display a table of contents in the rendered view of a markdown note. Just add  
a `[toc]` (at the beginning of a line and that's it.

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/8/87442567df8059cd02034b795c1a2a7dbf5b6f98.png)

However, if you want the toc to look different as to what you get, you will have to use CSS.

Here's a great topic about CSS:

> [@Share your CSS](https://discourse.joplinapp.org/t/share-your-css/1730):
>
> I would be curious if anyone would care to share their userstyle.css snippets and perhaps a screenshot?

This might also be of interest:

> **[GitHub - kot-behemoth/awesome-joplin: 📒 A curated list of awesome Joplin...](https://github.com/kot-behemoth/awesome-joplin)**
>
> 📒 A curated list of awesome Joplin themes and tools. - GitHub - kot-behemoth/awesome-joplin: 📒 A curated list of awesome Joplin themes and tools.

---

<div class="post-metadata">

**Author:** ![iwc2021](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/iwc2021/32/12115_2.png) [@iwc2021](https://discourse.joplinapp.org/u/iwc2021)\
**Post date:** [27 December 2021 17:06 UTC](https://discourse.joplinapp.org/t/any-outline-option-like-the-one-in-typora/12766/6 "2021-12-27T17:06:45Z")

</div>

You can use Typora as an external editor and still see the Typora Outline