Home → Questions →

Can't export TOC as sidebar/javascript popup

• Edit

Nathan

06 Sep, 2019 06:40 PM

I'll be the first to admit I'm out of my depth, but I'm trying to get some flavor of TOC that resembles what is generated in preview. I've found a few discussions on this. I've tried injecting my own <!—TOC--> tag as well as attempting to copy the source code when I right click on the element.

I have an extremely long document (it's actually made up of multiple md documents via includes). I'd like to generate a table of contents on the side so it is always visible. If I had my way, I'd go with the dynamic, pop-up version, but I'll take what I can get.

I'd really appreciate any guidance! Thanks!, Nathan

1. Support Staff 1 Posted by Brett on 06 Sep, 2019 06:59 PM

   

   Hi Nathan,

   This is not possible with Marked, you would have to generate your own
   Javascript and CSS for it. There are some JS/jQuery plugins out there
   for generating tables of contents that would make the job relatively
   simple (if you have any coding background).

   -Brett

   • Edit

2. 2 Posted by Nathan on 06 Sep, 2019 07:04 PM

   

   Rats! Well, thanks for getting back to me so quickly. I'd be stretching it if I claimed to have any appreciable coding background... Given that, would you consider pointing me down what you think might be a peril-less path? I'd give it a shot if I thought I might be able to make something look even remotely as nice as what you did with the interface.

   • Edit

3. Support Staff 3 Posted by Brett on 06 Sep, 2019 07:13 PM

   

   Well, you can use a plugin like
   https://www.cssscript.com/generating-a-table-of-contents-with-pure-javascript-toc/,
   or build one based on a tutorial:
   https://css-tricks.com/automatic-table-of-contents/

   Neither of those will give you the fixed positioning by default, so you
   need some CSS to make it float. Any CSS tutorial for fixed position
   navigation will help there. The one built into Marked uses extensive CSS
   and JavaScript to be able to remain offscreen until triggered, which
   also requires the app itself to be able to capture keystrokes and
   interface clicks and send them to the Javascript handler in the preview
   (the reason it's not feasible to make that exportable).

   If you scroll down on a longer page on my own site (e.g.
   https://brettterpstra.com/projects/bretts-popclip-extensions/), you can
   see how the TOC becomes a dropdown in the upper right. If that looks
   like what you want, feel free to crib CSS from it, and if you want to
   see the JS that makes it work, I'm willing to share.

   -Brett

   • Edit

4. 4 Posted by Nathan on 06 Sep, 2019 07:33 PM

   

   yeah, that is precicesly the sort of thing I'd like to accomplish. I suspect it may be outside of my abilities, but I'd be happy if you were willing to share — even on the off chance that I could get it off the ground.

   I enjoy learning this stuff. I've just no real aptitude for it, lol. At least I was smart enough to identify markdown as being a good way to do my writing content and deal with the styling stuff separately!

   Thanks again!

   • Edit

5. Support Staff 5 Posted by Brett on 06 Sep, 2019 08:54 PM

   

   All right, but you'll have to give me until after the weekend to
   separate out the parts that handle that. I'll check back in on Monday!

   -Brett

   • Edit

6. 6 Posted by Nathan on 06 Sep, 2019 09:08 PM

   

   Of course! I hope it's not too much trouble. It's very kind of you to offer.

   • Edit

7. Support Staff 7 Posted by Brett on 07 Sep, 2019 03:36 PM

   

   Ok, I thought of an easier way to handle this (and got up too early on Saturday, so…).

   Go to Preferences->Style and click the "Edit CSS" button under "Additional CSS", and insert this into the field:

   #mkreplaced-toc {
     background: rgba(255,255,255,.8);
     border-left: 30px solid #ccc;
     border-radius: 10px 0 0 10px;
     box-sizing: border-box;
     height: 30px;
     padding: 1em .5em;
     position: fixed;
     right: -260px;
     top: 1em;
     transition: all .2s linear;
     width: 290px;
   }
   #mkreplaced-toc:hover {
     border: 1px solid #ccc;
     border-right: 0;
     height: auto;
     right: 0;
     transition: all .2s linear;
   }
   #mkreplaced-toc, #mkreplaced-toc ul {
     list-style: none;
     margin-left: 0;
     padding-left: .5em;
   }
   

   Now just put a <!--TOC--> marker in the document and you should get a little grey hover target on the right side, and when you mouse over it, it should display the TOC with whatever list styles you specified in the Preferences->Export TOC settings.

   The style is rough, just something I used for testing. Modify at will. Let me know if this helps.

   • Edit

8. 8 Posted by Nathan on 07 Sep, 2019 08:57 PM

   

   OH... EMM... GEEE....
   !

   Brett, this is aMAZing. Thank you SO much. I really wish I knew more about this sort of stuff.

   I'm happy to research the following on my own, (I'm almost embarrassed to bring it up) but should you be able to point me in the right direction...

   I'm going to need to put text or an image on the button. I think I can probably figure that out. I'd be inclined to style a background image wherever the button is being created — mostly because I think I've done something like that before. If there's a better way, a keyword for me to search would probably be all I need.

   More tricky is that I'm going to need to get the contents to scroll. I'm making a 30+ chapter manual and I'm at about 20k words at the moment. I'm not really sure where to look for this. I'd probably start by hacking the height: auto; line...

   Either way, you've gone above and beyond. I'm really grateful.

   Nathan

   • Edit

9. Support Staff 9 Posted by Brett on 07 Sep, 2019 10:09 PM

   

   Well, at this point the “button” is a 30px-wide left border and the whole thing gets set to 30px tall when it’s hidden, creating something resembling a square. To get an image on it you’d want to use a :before pseudo selector, absolutely positioned, with text or a background image. If we did that, we could skip the whole border/height trick, which would be better for the animation anyway.

   Scrolling should be easy enough, I guess I was just testing with too short a document :). I’ll find some time tomorrow or Monday to add both of these things, at least in basic form for you to experiment with.

   Thanks,
   Brett

   • Edit

10. 10 Posted by Nathan on 07 Sep, 2019 11:24 PM

    

    Text/image, whatever. I started to figure some of that out playing with it. I also need to figure out how to get it to work on mobile. I think it’s related to the hover behavior in an element somewhere. I’ve been hunting for that as well ;-) .Clearly, I’m going to have to learn a bunch more CSS (or hire someone). But this will be enough of a proof of concept to get me to the next stage.

    • Edit

11. Support Staff 11 Posted by Brett on 08 Sep, 2019 09:40 AM

    

    Ok, so this will be as far as I have time to get you right now.

    First, to get the TOC to scroll, just add a max-height and overflow rule to the hover selector (added to existing selector):

    #mkreplaced-toc:hover {
      max-height: 70vh;
      overflow: auto;
    }
    

    The absolutely-positioned :before selector isn't working as well as I thought it would; it's hidden outside of the box of the list, so making it into a tab is proving difficult. If you add 30px of left padding to the list, you can put text inside of that, but then you have to make adjustments all around to hide it properly. I'll have to leave that one to you to explore, but here's what I was playing with:

    #mkreplaced-toc {
      background: rgba(255,255,255,.8);
      border-radius: 10px 0 0 10px;
      box-sizing: border-box;
      height: 30px;
      padding: 1em .5em 1em 30px;
      position: fixed;
      right: -267px;
      top: 1em;
      transition: all .2s linear;
      width: 290px;
    }
    ul#mkreplaced-toc::before {
        content: 'TOC';
        position: absolute;
        left: -5px;
        top: 23px;
        z-index: 1000;
        transform: rotate(-90deg);
    }
    #mkreplaced-toc:hover {
      border: 1px solid #ccc;
      border-right: 0;
      height: auto;
      max-height: 70vh;
      overflow: auto;
      right: 0;
      transition: all .2s linear;
    }
    #mkreplaced-toc, #mkreplaced-toc ul {
      list-style: none;
      margin-left: 0;
    }
    

    Which should give you:

    

    As far as touch compatibility goes, that will likely require some javascript to add a click or touchstart listener to the main ul (#mkreplaced-toc). Right now the reveal is entirely on hover, a concept which doesn't exist without a mouse, and which isn't easily replicable through CSS only.

    • Edit

12. 12 Posted by Nathan on 08 Sep, 2019 01:47 PM

    

    What?! I was hoping next you'd bake a commerce system into it. And maybe create a logo... Actually, could you finish writing the rest of my copy? -- Obviously (I hope), I'm kidding. I'm really grateful for the help. It has probably saved me days of struggle.

    When/if I find a JavaScript touchstart listener, can that be added the same way (through a new CSS or the "Additional CSS: Edit CSS" button in "Preferences"), or will I be hacking the generated html export? I hate to push my luck; I just don't want to spin my wheels hacking the wrong thing altogether.

    • Edit

13. 13 Posted by Nathan on 08 Sep, 2019 04:42 PM

    

    I'm sure I've done something ugly, but this is (sort of) working. In case it saves anyone else a step or two someday. Full disclaimer: I have almost no idea what I'm doing.

    #mkreplaced-toc {
      background: rgba(255,255,255,.8);
      border-radius: 10px 0 0 10px;
      box-sizing: border-box;
      height: 30px;
      padding: 1em .5em 1em 30px;
      position: fixed;
      right: -267px;
      top: 1em;
      transition: all .2s linear;
      width: 290px;
    }
    ul#mkreplaced-toc::before {
        content: ‘INDEX’;
        position: absolute;
        left: -5px;
        top: 23px;
        z-index: 1000;
        transform: rotate(-90deg);
    }
    #mkreplaced-toc:hover {
      border: 1px solid #ccc;
      border-right: 0;
      height: auto;
      max-height: 70vh;
      overflow: auto;
      right: 0;
      transition: all .2s linear;
    }
    #mkreplaced-toc, #mkreplaced-toc ul {
      list-style: none;
      margin-left: 0;
    }
    
    <style>
    element:hover, element:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -webkit-touch-callout: none /*only to disable context menu on long press*/
    }
    </style>
    
    
    <script>
    document.addEventListener("touchstart", function(){}, true);
    </script>
    

    I pasted this into:
    Preferences—>Style
    "Additional CSS: Edit CSS" button

    I also replaced "TOC" with "INDEX". "CONTENTS" didn't work. I think it's too long. I suspect it's trivial to fix.

    PS: If it's not already apparent, Brett is a total mensch. If you dig around a bit, you can find his projects online and buy him a beer like I did.

    Thanks again!

    • Edit

14. Support Staff 14 Posted by Brett on 08 Sep, 2019 05:15 PM

    

    Nice overall. You should definitely not have any tags in that CSS
    dialog, though. The additional style tag can just be removed, that rule
    can sit with the other styles. The script tag, though, would have to be
    added to your document itself, either by using a MultiMarkdown "xhtml
    header:" metadata line, or by inserting it automatically with a custom
    preprocessor…

    -Brett

    • Edit

15. 15 Posted by Nathan on 08 Sep, 2019 06:33 PM

    

    It actually seems to work. For now... I must have just gotten lucky.

    At least enough for me to get back to writing. I expect I'll have to re-style everything from scratch when I'm done, but this gets me the proof-of-concept I need to get to the next stage. I'm so far out of my depth as it is. But I've definitely enjoyed playing 'coder' for a minute. Given how little aptitude I have for it, it's a shame that I enjoy it so much.

    • Edit

16. 16 Posted by Nathan on 08 Sep, 2019 10:30 PM

    

    I'm getting auto numbering for all the h2+ headings in the TOC. Any idea why that might be? Not a big deal, but if it's a simple fix. I understand this is uncharted territory at this point...

    • Edit

17. Support Staff 17 Posted by Brett on 09 Sep, 2019 12:05 AM

    

    Whatever markers you have set in Export prefs will override the styles you add. Go to the Exports pane and set every level to None.

    - Brett

    • Edit

18. 18 Posted by Nathan on 09 Sep, 2019 12:04 PM

    

    Shazam! Thank you!

    It was hidden in plain sight. I was looking right at it for ages.

    For whatever that is worth, I think it is—in part—because the checkbox for "Print table of contents" looks like something that turns on/off the entire "Table of Contents" section.

    Also, for some reason, in my case, h1 headings won't take markers (bullets, etc.) no matter what. It's of no consequence to me. I'm merely reporting on the off-chance that it's helpful (and I understand full-well that my customizations are wonky and unsanctioned—so there's that...).

    Anyhow, please don't misinterpret any of this as complaining. I am delighted.

    • Edit

19. Support Staff 19 Posted by Brett on 09 Sep, 2019 12:24 PM

    

    In your custom TOC styling, the list-type: none will apply to the very first level, but everything else is overridden.

    Feedback on the preferences is noted and appreciated.

    - Brett

    • Edit

20. 20 Posted by Nathan on 09 Sep, 2019 07:57 PM

    

    If I have a multi-file document and use a TOC, is there a way I can comment out 'chapters' without loosing the TOC?

    <!--TOC max3-->
    /chapter01.md
    /chapter02.md
    
    <!--
    /chapter03.md
    —>
    
    /chapter04.md
    

    • Edit

21. Support Staff 21 Posted by Brett on 09 Sep, 2019 08:09 PM

    

    Do you lose the TOC with this current syntax?

    -Brett

    • Edit

22. 22 Posted by Nathan on 09 Sep, 2019 08:11 PM

    

    yes. I think I did before I added all the crazy stuff too though. But maybe I'm wrong. Probably easy enough to test...

    • Edit

23. Support Staff 23 Posted by Brett on 09 Sep, 2019 08:12 PM

    

    So you're saying the entire TOC doesn't show up because you commented a
    section? I'm a little baffled by that...

    -Brett

    • Edit

24. 24 Posted by Nathan on 09 Sep, 2019 08:31 PM

    

    Must be the custom CSS then. I'll file this under "You're pushing your luck, Nathan".
    Happy to test it for you later if you like. Right now, I'm afraid to change anything because it's already working even though it 'shouldn't' :-P

    • Edit

25. Support Staff 25 Posted by Brett on 09 Sep, 2019 08:36 PM

    

    I figured out why your custom css with tags in it was working… because
    the first tag is a style open/close that starts inside of a style tag,
    the open tag is ignored and the close tag ends the original. Then your
    script tag is recognized, and the last closing style tag is dropped.
    It's 2 errors to get there, but neither will stop the page from loading.

    I'll have to look into this commenting issue, though. It doesn't make
    sense, but I also can't see how the custom stuff would make a
    difference. I'll look into it.

    -Brett

    • Edit

26. Support Staff 26 Posted by Brett on 09 Sep, 2019 08:38 PM

    

    Oh, hey, does chapter 3 include any HTML comments within it? I believe
    it's still rendering the include, even though it's all commented out,
    but any additional comments might have the same effect as described
    above with the nested style tags...

    Other question, when you do this and the TOC disappears, does the
    built-in pop-up TOC also disappear?

    -Brett

    • Edit

27. 27 Posted by Nathan on 09 Sep, 2019 08:47 PM

    

    I don't believe so. What I sent was just an example. I'd be happy to send you a fuller example but would need to do it privately.

    • Edit

28. Support Staff 28 Posted by Brett on 09 Sep, 2019 08:52 PM

    

    email me a zip file that fully displays the behavior. me at brettterpstra dot com.

    • Edit

29. 29 Posted by Nathan on 09 Sep, 2019 09:23 PM

    

    sent and then tested. that was a mistake. something I did in the edit fixed the problem.sorry, doing too many things at once.

    • Edit

30. 30 Posted by Nathan on 09 Sep, 2019 10:07 PM

    

    Managed to reproduce and sent the steps in latest email. Following up here just in case.

    • Edit