# Can't export TOC as sidebar/javascript popup

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

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.

3. Support Staff 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

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!

5. Support Staff 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

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.

7. Support Staff 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;
box-sizing: border-box;
height: 30px;
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;
}


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.

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

9. Support Staff 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

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.

11. Support Staff 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);
box-sizing: border-box;
height: 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.

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.

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);
box-sizing: border-box;
height: 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>
</script>


I pasted this into:
Preferences—>Style

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!

14. Support Staff 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
preprocessor…

-Brett

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.

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

17. Support Staff 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

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.

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.

19. Support Staff 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

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

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

Do you lose the TOC with this current syntax?

-Brett

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

23. Support Staff 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

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

25. Support Staff 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

26. Support Staff 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,
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

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.

28. Support Staff 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.

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.

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.

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

### »

#### Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

# Keyboard shortcuts

### Generic

? Show this help Blurs the current field

### Comment Form

r Focus the comment reply box Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

## Recent Discussions

 11 Nov, 2019 10:16 AM Add org mode support 06 Nov, 2019 04:09 PM Marked 2 is asking me to reregister after catalina upgrade 05 Nov, 2019 12:40 AM Pre-formatted text blocks rendering as italic 04 Nov, 2019 08:26 PM Marked 2 - Bear Preview 02 Nov, 2019 09:12 PM Crashes too often when editing MathJax

## Recent Articles

 Using JavaScript in Marked Custom CSS: Writing custom CSS for Marked License code has already been utilized Highlight sentences longer than a certain number of words How do I retrieve a lost license (direct version)