Toc as the sidebar

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

@bartatgithub

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. . .

image

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%;
	}
}
28 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 :relieved: cause it’s only for me, it might not be compatible with other themes or views

i hope someone can improve this :joy:

2 Likes

@moonlygreat

"Stole" this one immediately!

That is some really clever work. Thanks for sharing it!

1 Like

Love it too, it’s already adopted, thank you @moonlygreat

This is absolutely brilliant! Thank you so much, everyone!!

This is a really good work, I like it. Thank you for contributing :+1:

Is it possible to remove the underlines?

nav.table-of-contents a {
    text-decoration: none;
}

add this to the userstyle.css

2 Likes

Thanks! Maybe I should learn some CSS :smile:

Hello All,

I've added @moonlygreat's code to my userstyle.css file and added [toc] to the top of the notes for which I want a Table of Contents. However, the result isn't a floating table but rather a static table in the note where [toc] is placed.

Must I also install the Joplin Plugin Generator to realise the intended functionality? If so, I've run into another problem as it had refused to install:

Yeoman Doctor
Running sanity checks on your system

✔ No .bowerrc file in home directory
✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ No .yo-rc.json file in home directory
✔ Node.js version
util.js:231
    throw new ERR_OUT_OF_RANGE('err', 'a negative integer', err);
    ^

RangeError [ERR_OUT_OF_RANGE]: The value of "err" is out of range. It must be a negative integer. Received 536870174
    at Object.getSystemErrorName (util.js:231:11)
    at exceptionWithHostPort (internal/errors.js:532:21)
    at internalConnect (net.js:920:16)
    at defaultTriggerAsyncIdScope (internal/async_hooks.js:429:12)
    at GetAddrInfoReqWrap.emitLookup [as callback] (net.js:1063:9)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:69:8) {
  code: 'ERR_OUT_OF_RANGE'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! yo@3.1.1 postinstall: `yodoctor`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the yo@3.1.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I'm running Joplin 1.2.6 on Mac OS 10.14.6

It shouldn't need the plugin generator to work. I am using Joplin 1.3.2 (prod, darwin) on a Mac (which is a beta build I believe, beware :-)). That might be your issue.

I'm also using V 1.2.6 on a Mac and I had to restart Joplin before it worked. Before the restart it behaved as you described.

Hmmm... restarted again but the TOC is still static at the top of the relevant pages.

Is there some way of debugging which might help me determine the problem (and hopefully the solution)?