Toc as the sidebar

Daeraxa · 2020-12-27T19:20:57.880Z

If you are after the simple answer of how to install the plugin (rather than compling the software from source) - you need to download the actual .jpl file rather than the source code. You can find it on the release page - https://github.com/cqroot/joplin-outline/releases/tag/1.0.1

image1323×571 39.6 KB

Once you have that you can go to Tools->Options->Plugins->Install Plugin and navigate to the .jpl file then restart Joplin and it should pick it up.

cqroot · 2020-12-28T01:39:35.681Z

Yes, you need to download the jpl file from the release page.

jb261 · 2020-12-28T01:42:35.230Z

Yep, got it from @Daeraxa's post. Didn't realize file would be at that link. Not familiar with Github yet.

Sweet plugin @cqroot!

johano · 2020-12-28T01:55:54.996Z

Hopefully, scrolling can be added to the Outline Plugin pane in the future? In long notes with many headings and subheadings, where the outline list is longer than the screen, scrolling is not possible.
Even so, I find this plugin really useful.

@cqroot, may I suggest that you copy your announcement post to the Plugins Category so it might be discovered more easily by others?

cqroot · 2020-12-28T02:09:32.113Z

Okay, I did not consider this situation, I will implement it as soon as possible. If you have other good suggestions, you can submit an issue on github.

A markdown outline sidebar plugin for Joplin Plugins

https://github.com/cqroot/joplin-outline . A toc sidebar plugin for joplin. Modify from https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/toc/ Fixed the problem that # in the code block would be abnormally matched and simply adjusted the style. I will continue to optimize it in the future, and everyone is welcome to try and submit issues. [e96a1011aef16ae367531fb522d187ecdcd7e7a9_2_690x393]

cqroot · 2020-12-28T12:06:35.034Z

Added.

MisterKelly · 2020-12-29T13:18:14.079Z

I have been using the userchrome style suggestions to make a TOC and it has one obvious disadvantage: I have to remember to add [toc] at the top of every note where I want one. And this then appears at the top of my notes on mobile devices.

I have loaded the plugin and I now have a possibly stupid question. On the screenshot above the heading ("Outline") and the toc itself are both in a clear sans serif bold. When I load the plug in they are both in a smaller rather ugly serif font. I am using Windows 10. Why do I have serif fonts?

I thought about going into the plugin and changing the css there. Then I remembered that this is what the plugin is supposed to make redundant so I thought I would ask here instead

I am also personally not a fan of the green text colour. Could we have a setting to change this at some point?

cqroot · 2020-12-29T13:52:54.975Z

I accept your opinion. I will add the settings section as soon as possible to give users the right to choose the appearance. I think this will be done soon.

MisterKelly · 2020-12-29T14:20:35.273Z

Thanks. There sounds excellent.

What about the differences between the way the plugin looks on your screenshot and the way it appears on mine? This is what I see:

which is very different from your screenshot. Mine is sad serif. Yours is groovy non-serif More importantly perhaps this font does not match the rest of the Joplin window and looks wrong.

Is that a Windows issue or what?

cqroot · 2020-12-29T14:25:51.573Z

Now the font-family of the plugin panel is var(--joplin-font-family). This is the reason for the difference.

cqroot · 2020-12-30T13:22:28.321Z

v1.0.3. Now you can set the font, color and font size on the settings page. Settings will be applied when you refresh the outline panel (such as switching notes).

jb261 · 2020-12-30T15:01:35.747Z

A very minor tweak suggestion - for those who keep the TOC sidebar very narrow (e.g., when using Joplin in split screen and having 5 columns - notebook list, note list, markdown editor, rendered view, TOC sidebar), small bullet points in front of the TOC headers in various colors (different color for h1, h2, h3, etc.) might make it easier to see at a glance where each header sits in the outline hierarchy. Just a suggestion. Love the this plugin!

MisterKelly · 2020-12-30T15:08:25.802Z

Fantastic!!!

I shall check this out immediately

symisz · 2020-12-30T18:38:00.957Z

Thanks for the plugin. I've reverted back to using v1.02, since the font-family won't load for some reason. Also for people unfamiliar with CSS. The font size is followed by a unit, 1.2em for example. Looking forward in seeing more options.

cqroot · 2020-12-31T02:06:59.499Z

At present, only the configuration of css has been added to the settings, which may be convenient for users who are familiar with css. But this is not easy for everyone, so I will optimize it.

The font size may be set like other software in the future, the default unit is pt.

The problem that font-family cannot be loaded does not appear here. Maybe you need to switch notes to reload the outline window or restart joplin. If you still have problems with font-family, can you give me the details and screenshots.

cqroot · 2020-12-31T03:26:48.257Z

I probably understand what you mean, but I can't imagine how it should be. Can you give me a picture or a similar design in other software.

symisz · 2020-12-31T08:01:52.857Z

I got the font working. I assumed a font family name was correct, it wasn't and changed to a default serif font.

Ari · 2021-01-01T23:30:44.732Z

Below is a solarized-dark version of @moonlygreat code.

Hoping that this (or some other expandable + floating TOC variant) will make it into a standard feature of Joplin. It's one of the features I miss from Zim.

Is there a way to prevent the TOC placeholder from being converted into hard links every time the WYSIWYG is used to modify the note? I find this kind of annoying / major usability problem (for my simple use case, where I stay most of the time on WYSIWYG and some very large notes that need 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: #073642;
	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%;
	}
}

symisz · 2021-01-05T14:49:09.907Z

~~I'm also unable getting this CSS to work.~~
~~I've added the stylesheets to the file userstyle.css and it seems not working even after restarting Joplin.~~

I wasn't aware that you need to write down [toc] inside the document to get this to work.

symisz · 2021-01-10T20:56:57.322Z

I modified the CSS found here and created another dark mode version, I tried to create a tree-list type navigation with a minimal look.

Instructions:
add [toc] in your Joplin document
copy the CSS into userstyle.css found under Options > Appearance
close all instances of Joplin and relaunch & move the mouse cursor to the upper corner in the read panel (just under the first heading)

nav.table-of-contents ul {
	margin-top: 0px;
	margin-bottom: 0px;
}

nav.table-of-contents>ul {
 	top: 41px;
	right: 0px;
	z-index: 99;
	
	font-size: 12px;
	position: fixed;
	padding: 15px;
	
	border-radius: 3px 0px 0px 3px;
	margin: 0px;
	
	overflow: hidden;
	min-height: 15%;
	width: 5px;
	transition: .2s;
}

nav.table-of-contents::after {
    content: ' \25C4';
    color: #555555;
    right: 0;
    position: absolute;
    top: 28px;
}

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

	min-width: 260px;
	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;
	list-style-position: inside;
	line-height: 1.3em;
}

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

ul li {
    display: list-item;
	list-style-position: inside;
	line-height: 1.3em;
}

nav.table-of-contents ul {
	margin-left: 1.01em;
}

nav.table-of-contents>ul {
    list-style-type: none;
}

/*
nav.table-of-contents>ul {
    list-style-type: '┏ ';
}
*/

nav.table-of-contents>ul ul {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul li:last-child {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul ul {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul ul li:last-child {
    list-style-type: '┗ ';
}



/* 
nav.table-of-contents>ul {
    list-style-type: '┏ ';
}


ul ul::before {
	content: ' \00A0';
    letter-spacing: 0.9em;
    position: absolute;
    margin-left: -7px;
    margin-top: 0.2em;
    text-decoration: overline;
}
*/

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

nav.table-of-contents li a:hover {
    text-decoration: underline;
}