Toc as the sidebar

I think you're right. Maybe with the plugin system that is being implemented now, it will possible

1 Like

but that was a great idea though :thinking:

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

8 Likes

@cqroot Many thanks for this plugin. No more hacking on userstyle.css to manipulate TOC. Very useful indeed.

Greetings from a happy user in Scotland! :slightly_smiling_face:

Sorry for the newb question, but how do I use this? I need outline.jpl, but that's not in the zip file. So I guess I need to build the plugin and update the plugin framework?

I downloaded the zip and extracted it. Then downloaded and installed node.js (to get npm command). Tried running npm run dist in the directory where I extracted the joplin-outline zip, but that didn't work:

> joplin_plugin@1.0.0 dist D:\Downloads\joplin-outline-main
> webpack

'webpack' is not recognized as an internal or external command,
operable program or batch file.

Can someone please point me in the right direction? Thanks.

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


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.

2 Likes

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

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

Sweet plugin @cqroot!

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?

2 Likes

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.

1 Like

Added.

3 Likes

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 :slight_smile:

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

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.

2 Likes

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:

image

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

Is that a Windows issue or what?

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

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

2 Likes

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!

Fantastic!!!

I shall check this out immediately :smiley:

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.

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.