Toc as the sidebar

Features
41

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

42

Is it possible to remove the underlines?

ζˆͺ屏2020-10-20 15.49.54
ζˆͺ屏2020-10-20 15.49.542272Γ—1458 931 KB

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

add this to the userstyle.css

2 Likes
44

Thanks! Maybe I should learn some CSS :smile:

45

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

46

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.

48

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.

49

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

50

It would be better to keep the original rendered static toc as it's now not included in the exported PDF. Is it possible?

51

@drcege

If you put the above TOC css in an @media screen section in the css file it will only apply to the screen rendering and leave the print rendering alone.

@media screen {

<screen only css goes here>

}

My userstyle.css file has two sections; one for screen and one for print as I have set them up to behave differently.

@media screen {

<screen css goes here>

}
@media print {

<print css goes here>

}
3 Likes
52

Thanks, looking forward to this feature!

53

SOLVED
I've fixed my issue by inserting @moonlygreat's code before everything else in my custom stylesheet :grin:

1 Like
54

@dpoulton, could this be used to not print link references? If so, could you please suggest the necessary code to place within @media print ?

55

@heviiguy

If you are trying to make hyperlinks just look like normal text when printing you could add this to the @media print section.

a {
    color: #000000;
    /* sets hyperlink colour */
    text-decoration: none;
    /* removes hyperlink underline */
    }
.resource-icon {
    display: none;
    /* removes resource icons - txt, pdf, joplin 'J' internal link etc. */
    }

Is that what you are looking for?

Edit: Looks like the css relating to resource icons is not needed as it seems that Joplin no longer includes them in prints anyway.

56

Thank-you @dpoulton. However, since they're completely non-functional and thus redundant when printed, I'd like to not have any links printed at all.

Here's a wild-@ss guess by one who isn't CSS proficient; would the following work?

@media print {
  a {
      display: none;
      /* removes hyperlink from print output when also encased within @media print */
    }
}
57

Nice.

58

Do what I do and just try it. Make a copy of your current and working userstyle.css, tinker away and when finished copy the old one back.

But to answer your question, yes, it does work but I would not advise using it unless you never have inline hyperlinks.

For instance, using your css, this note that has a helpful, explanatory hyperlink:

Note

would print as:

print

1 Like
59

Yeah, very good point :smirk: . Admittedly, I was being lazy. Thanks, @dpoulton!

1 Like
60

This is awesome, I'm using @moonlygreat's code and it's working great.
The only thing I'm missing is showing where in the TOC you are currently at, for example like Typora does.
Right now this pop up shows the TOC very nicely but doesn't show my position. I'm basically 0 at CSS but I'll try to figure it out.

61

hmmm I don’t think you can do that with just pure css.. syncing toc and article scroll height would require JS