I saw your note, but I wasn’t sure how to target / use that with CSS. Would love to learn more, seems like your way is much cleaner.
You just need to insert that in the note instead of [[toc]] or whatever you use to insert the toc
1 Like
Sorry if I’m not clear
this is a brilliant solution to the TOC! @davidpoza , to let more user use this, I think this should be added in the Edit menu -> Insert TOC and set it to the floating design as the default for less technical users.For advanced users they can still customize the userstyle.css manually.
Ah, now I understand, that is great! I thought you meant I had to modify the app code, your way is very easy.
It looks like maybe you can even leave off the listType definition to make it shorter:
$<toc{"level":[2,3]}>
Thank you for clarifying!
2 Likes
This version made the scroll bar inactive when the editor was hidden. For this reason I have gone with the version from @uar for the moment. The whole idea is excellent though, and thank you both, and everyone else who has added ideas.
Owen
I really like having a TOC in my longer notes, but have to have it hidden by default using:
<details markdown='1'>
<summary>Table of Contents</summary>
[[toc]]
</details>
Since I also like having the split view. And having a TOC will make the scroll position of the editor vs the viewer be out of sync.
Does anyone know of a better solution for that? (Having the editor and viewer scroll position be in sync when a TOC has been added)
4 Likes
that’s a good solution!
Hi
Really interested in this one, but can get it working.
I am a web dev so I know CSS and have done the restart after editing.
So what could going wrong?
Thanks
I have found that I need an empty line between the closing </summary> tag and the [[TOC]] marker.
<details markdown='1'>
<summary>Table of Contents</summary>
[[TOC]]
</details>
Also no restart is required as this is put at the top of each note in which you want to use it, not in a CSS file.
1 Like
did you put [toc] at the beginning of the note?
Forgotten this one. Thanks meanwhile it works.
It is also one of the existing features of the vscode editor. . .
I just modified the codes above you guys developed for my own taste
I'm a css beginner so there might be some redundant code. check it before use hits
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%;
}
}
31 Likes
This TOC is really cool. How do I get this work please? Is just he CSS needed, or do I need to do something else?
This is awesome @moonlygreat! Switched over to use yours.
@Dave this is a CSS only hack. From preference > appearances add that css to "custom stylesheet for rendered markdown". Note, you will need to have a [toc] somewhere in your note for this to display. Basically it takes the rendered TOC and hides it until you hover over the right side of the app.
4 Likes
thanks 
cause it’s only for me, it might not be compatible with other themes or views
i hope someone can improve this 
2 Likes
1 Like
This is absolutely brilliant! Thank you so much, everyone!!