tag:support.markedapp.com,2011-09-11:/discussions/questions/9318-cant-export-toc-as-sidebarjavascript-popupMarked: Discussion 2019-09-09T22:07:14Ztag:support.markedapp.com,2011-09-11:Comment/476003502019-09-06T18:59:38Z2019-09-06T18:59:38ZCan't export TOC as sidebar/javascript popup<div><p>Hi Nathan,</p>
<p>This is not possible with Marked, you would have to generate your own<br>
Javascript and CSS for it. There are some JS/jQuery plugins out there<br>
for generating tables of contents that would make the job relatively<br>
simple (if you have any coding background).</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-06T19:04:19Z2019-09-06T19:04:19ZCan't export TOC as sidebar/javascript popup<div><p>Rats! Well, thanks for getting back to me so quickly. I'd be stretching it if I claimed to have any <em>appreciable</em> 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.</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-06T19:13:45Z2019-09-06T19:13:45ZCan't export TOC as sidebar/javascript popup<div><p>Well, you can use a plugin like<br>
<a href="https://www.cssscript.com/generating-a-table-of-contents-with-pure-javascript-toc/">https://www.cssscript.com/generating-a-table-of-contents-with-pure-...</a>,<br>
or build one based on a tutorial:<br>
<a href="https://css-tricks.com/automatic-table-of-contents/">https://css-tricks.com/automatic-table-of-contents/</a></p>
<p>Neither of those will give you the fixed positioning by default, so you<br>
need some CSS to make it float. Any CSS tutorial for fixed position<br>
navigation will help there. The one built into Marked uses extensive CSS<br>
and JavaScript to be able to remain offscreen until triggered, which<br>
also requires the app itself to be able to capture keystrokes and<br>
interface clicks and send them to the Javascript handler in the preview<br>
(the reason it's not feasible to make that exportable).</p>
<p>If you scroll down on a longer page on my own site (e.g.<br>
<a href="https://brettterpstra.com/projects/bretts-popclip-extensions/">https://brettterpstra.com/projects/bretts-popclip-extensions/</a>), you can<br>
see how the TOC becomes a dropdown in the upper right. If that looks<br>
like what you want, feel free to crib CSS from it, and if you want to<br>
see the JS that makes it work, I'm willing to share.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-06T19:33:50Z2019-09-06T19:33:50ZCan't export TOC as sidebar/javascript popup<div><p>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.</p>
<p>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!</p>
<p>Thanks again!</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-06T20:54:47Z2019-09-06T20:54:47ZCan't export TOC as sidebar/javascript popup<div><p>All right, but you'll have to give me until after the weekend to<br>
separate out the parts that handle that. I'll check back in on Monday!</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-06T21:08:41Z2019-09-06T21:08:41ZCan't export TOC as sidebar/javascript popup<div><p>Of course! I hope it's not too much trouble. It's very kind of you to offer.</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-07T15:36:15Z2019-09-07T15:36:15ZCan't export TOC as sidebar/javascript popup<div><p>Ok, I thought of an easier way to handle this (and got up too early on Saturday, so…).</p>
<p>Go to Preferences->Style and click the "Edit CSS" button under "Additional CSS", and insert this into the field:</p>
<pre>
<code>#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;
}</code>
</pre>
<p>Now just put a <code><!--TOC--></code> 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.</p>
<p>The style is rough, just something I used for testing. Modify at will. Let me know if this helps.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-07T20:57:39Z2019-09-07T20:57:39ZCan't export TOC as sidebar/javascript popup<div><p>OH... EMM... GEEE....<br>
!</p>
<p>Brett, this is aMAZing. Thank you SO much. I really wish I knew more about this sort of stuff.</p>
<p>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...</p>
<p>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.</p>
<p>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...</p>
<p>Either way, you've gone above and beyond. I'm really grateful.</p>
<p>Nathan</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-07T22:09:28Z2019-09-07T22:09:28ZCan't export TOC as sidebar/javascript popup<div><p>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.</p>
<p>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.</p>
<p>Thanks,<br>
Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-07T23:24:18Z2019-09-07T23:24:18ZCan't export TOC as sidebar/javascript popup<div><p>Text/image, whatever. I started to figure <em>some</em> 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.</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-08T09:40:26Z2019-09-08T09:40:26ZCan't export TOC as sidebar/javascript popup<div><p>Ok, so this will be as far as I have time to get you right now.</p>
<p>First, to get the TOC to scroll, just add a max-height and overflow rule to the hover selector (added to existing selector):</p>
<pre>
<code>#mkreplaced-toc:hover {
max-height: 70vh;
overflow: auto;
}</code>
</pre>
<p>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:</p>
<pre>
<code>#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;
}</code>
</pre>
<p>Which should give you:</p>
<p><img src="http://ckyp.us/Dajvgn+" alt=""></p>
<p>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.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-08T13:47:33Z2019-09-08T13:48:34ZCan't export TOC as sidebar/javascript popup<div><p>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.</p>
<p>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.</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-08T16:42:00Z2019-09-08T16:43:53ZCan't export TOC as sidebar/javascript popup<div><p>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.</p>
<pre>
<code>#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></code>
</pre>
<p>I pasted this into:<br>
Preferences—>Style<br>
"Additional CSS: Edit CSS" button</p>
<p>I also replaced "TOC" with "INDEX". "CONTENTS" didn't work. I think it's too long. I suspect it's trivial to fix.</p>
<p>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.</p>
<p>Thanks again!</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-08T17:15:58Z2019-09-08T17:15:58ZCan't export TOC as sidebar/javascript popup<div><p>Nice overall. You should definitely not have any tags in that CSS<br>
dialog, though. The additional style tag can just be removed, that rule<br>
can sit with the other styles. The script tag, though, would have to be<br>
added to your document itself, either by using a MultiMarkdown "xhtml<br>
header:" metadata line, or by inserting it automatically with a custom<br>
preprocessor…</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-08T18:33:46Z2019-09-08T18:33:46ZCan't export TOC as sidebar/javascript popup<div><p>It actually seems to work. For now... I must have just gotten lucky.</p>
<p>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.</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-08T22:30:13Z2019-09-08T22:30:13ZCan't export TOC as sidebar/javascript popup<div><p>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...</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T00:05:38Z2019-09-09T00:05:38ZCan't export TOC as sidebar/javascript popup<div><p>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.</p>
<ul>
<li>Brett</li>
</ul></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T12:04:14Z2019-09-09T12:04:14ZCan't export TOC as sidebar/javascript popup<div><p>Shazam! Thank you!</p>
<p>It was hidden in plain sight. I was looking right at it for ages.</p>
<p>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.</p>
<p>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...).</p>
<p>Anyhow, please don't misinterpret any of this as complaining. I am delighted.</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T12:24:49Z2019-09-09T12:24:49ZCan't export TOC as sidebar/javascript popup<div><p>In your custom TOC styling, the list-type: none will apply to the very first level, but everything else is overridden.</p>
<p>Feedback on the preferences is noted and appreciated.</p>
<ul>
<li>Brett</li>
</ul></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T19:57:55Z2019-09-09T19:57:55ZCan't export TOC as sidebar/javascript popup<div><p>If I have a multi-file document and use a TOC, is there a way I can comment out 'chapters' without loosing the TOC?</p>
<pre>
<code><!--TOC max3-->
/chapter01.md
/chapter02.md
<!--
/chapter03.md
—>
/chapter04.md</code>
</pre></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T20:09:35Z2019-09-09T20:09:35ZCan't export TOC as sidebar/javascript popup<div><p>Do you lose the TOC with this current syntax?</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T20:11:28Z2019-09-09T20:11:28ZCan't export TOC as sidebar/javascript popup<div><p>yes. I think I did before I added all the crazy stuff too though. But maybe I'm wrong. Probably easy enough to test...</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T20:12:53Z2019-09-09T20:12:53ZCan't export TOC as sidebar/javascript popup<div><p>So you're saying the entire TOC doesn't show up because you commented a<br>
section? I'm a little baffled by that...</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T20:31:36Z2019-09-09T20:31:36ZCan't export TOC as sidebar/javascript popup<div><p>Must be the custom CSS then. I'll file this under "You're pushing your luck, Nathan".<br>
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</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T20:36:52Z2019-09-09T20:36:52ZCan't export TOC as sidebar/javascript popup<div><p>I figured out why your custom css with tags in it was working… because<br>
the first tag is a style open/close that starts inside of a style tag,<br>
the open tag is ignored and the close tag ends the original. Then your<br>
script tag is recognized, and the last closing style tag is dropped.<br>
It's 2 errors to get there, but neither will stop the page from loading.</p>
<p>I'll have to look into this commenting issue, though. It doesn't make<br>
sense, but I also can't see how the custom stuff would make a<br>
difference. I'll look into it.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T20:38:50Z2019-09-09T20:38:50ZCan't export TOC as sidebar/javascript popup<div><p>Oh, hey, does chapter 3 include any HTML comments within it? I believe<br>
it's still rendering the include, even though it's all commented out,<br>
but any additional comments might have the same effect as described<br>
above with the nested style tags...</p>
<p>Other question, when you do this and the TOC disappears, does the<br>
built-in pop-up TOC also disappear?</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T20:47:10Z2019-09-09T20:47:10ZCan't export TOC as sidebar/javascript popup<div><p>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.</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T20:52:31Z2019-09-09T20:52:31ZCan't export TOC as sidebar/javascript popup<div><p>email me a zip file that fully displays the behavior. me at brettterpstra dot com.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T21:23:23Z2019-09-09T21:23:23ZCan't export TOC as sidebar/javascript popup<div><p>sent and then tested. that was a mistake. something I did in the edit fixed the problem.sorry, doing too many things at once.</p></div>Nathantag:support.markedapp.com,2011-09-11:Comment/476003502019-09-09T22:07:13Z2019-09-09T22:07:13ZCan't export TOC as sidebar/javascript popup<div><p>Managed to reproduce and sent the steps in latest email. Following up here just in case.</p></div>Nathan