automatic TOC generated for HTML
Love the new version of Marked. One feature that is great (amongst many) is the automatically generated TOC for navigating a longer document in Marked.
Here's what would be super cool (if possible): to also have the
option to have that auto generated TOC embedded into the final HTML
for
a document. Currently I build that TOC by hand (much easier using
MMD), but if it could be auto-generated in some way that would be a
godsend.
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by Brett on 24 Oct, 2011 07:03 PM
This has been requested a couple of times. My main consideration is that the current TOC uses jQuery, and that means having to include not only the TOC javascript, but the entire jQuery library as well. The extra CSS is minimal, it's just the addition of the jQuery library that worries me.
Open question: would an additional 100k on the output file be an issue if it was specifically requested by the user?
Alternatively, I could export a directory structure with the necessary files separately to avoid confusion. I like the idea of everything being self-contained in a single, ready-to-publish file, but it's an option.
Update: I take it back. I forgot I switched to a non-jQuery TOC generation method. I can include the TOC without adding more than 8k to the whole thing. I'll plan on adding that as an option for 1.3.2 (1.3.1 is in review right now).
2 Posted by Mathew on 24 Oct, 2011 07:14 PM
100k isn't much, so it wouldn't be a problem. But only 8k additional is a no brainer. Wow, let's rock this TOC thing! Many thanks for including with 1.3.2. It will be a major enhancement to Marked (at least for some of us).
With the addition of easy multiple custom styles, and other enhancements, it's hard to envision using anything other than Marked these days as my "page layout" app of choice.
3 Posted by Mathew on 25 Oct, 2011 11:21 AM
In my excitement about TOC generation, I forgot to ask a critical question regarding placement. Will it be easy to designate where the TOC is located? (e.g typically I don't want it at the very top of a page, but below H1 and some short introductory text).
Alternatively if there's no way to indicate where the automatic TOC is located, will it be very easy to change placement with the resulting HTML (I'm assuming yes)
Support Staff 4 Posted by Brett on 25 Oct, 2011 01:02 PM
There won't be any way to specify it, but placing it within the HTML is as easy as moving a div around. I'll make sure it's clearly commented in the source.
I was planning to have it function just like it does in the preview, where it hides on the side, but it sounds like you want to have it in the document itself. That would take some extra styling, but I can come up with something.
5 Posted by Mathew on 25 Oct, 2011 01:09 PM
Yes, I would envision them being in the document itself. Hmm . . . I wonder how a TOC off to the side would work on a web page: would there be some indicator to a user that there was a "hidden" panel of links to access?
Currently you have to be "in the know" to use the TOC within Marked (there's no visual indicator that I can see). Not a problem as each user learns about this when they buy the program. But for the web, with many diverse users, there would need to be—it seems to me—some clear visual indication that a TOC was available off to the side.
Support Staff 6 Posted by Brett on 25 Oct, 2011 02:37 PM
I "hid" it because I didn't want it to be obtrusive in any way, but I can certainly make it more obvious either just in the HTML export or in HTML *and* the preview window. I can also easily apply a stylesheet that allows exported HTML and print to include the TOC inline in the document, which might be a nice option on export. Adding both options to the list for an upcoming version.
7 Posted by Mathew on 25 Oct, 2011 03:05 PM
Yes, in Marked having the TOC hidden works very well. Just needs to be more obvious to a wider audience when in HTML. Thanks so much for adding both of these options!
8 Posted by Mathew on 25 Oct, 2011 03:12 PM
BTW, I don't think seeing the complete TOC has to be obvious. But if there were a simple icon, or text link, off to the side indicating there was something to click on then that would probably be enough. It's very elegant how the current TOC as currently implemented in Marked slides out. That same behavior would still be nice to have as an option.
Support Staff 9 Posted by Brett on 25 Oct, 2011 03:19 PM
This will take some thinking, but I'll plan something in soon.
10 Posted by Mathew on 25 Oct, 2011 03:25 PM
Brett: Many thanks! I know it takes some extra work about how best to implement this. I don't have obvious practical suggestions to make to solve this. In practice, I've just found that if it's not "obvious" on a web page then it won't get noticed or used. (I think your visitors overall are quite different, more geeky.)
11 Posted by chocolate.camer... on 06 Jun, 2013 03:46 PM
You could use h5o, the HTML5 outliner It is less than 3KB.
I would like to have a standard TOC in the exported HTML file, right after the H1 (if there is one H1 at the top, and only one, I guess), with no special styling whatsoever nor hide/show or fancy animation effects.
12 Posted by Roel Van Gils on 14 Aug, 2017 12:42 PM
I found out that it's still not possible to export a PDF with a working table of contents from Marked :( What's the suggested way to get around that today? What command line tool should I use to export an HTML document to a PDF with a working outline and table of contents?
Support Staff 13 Posted by Brett on 14 Aug, 2017 02:52 PM
Pandoc can do it (http://pandoc.org/). There's a tool called wkpdf that
used a custom version of WebKit to do it, but I think development on it
stopped and I'm not sure it works with newer versions of macOS.
If you haven't used Pandoc before, it can take a bit of experimentation
to get the command line options right. Here's a helpful link:
http://www.mscharhag.com/software-development/pandoc-markdown-to-pdf
-Brett
14 Posted by Roel Van Gils on 14 Aug, 2017 02:59 PM
Thanks, Brett. I got the job done using wkhtmltopdf, although it has its own quirks (font-size should be set to 400% in CSS when using it on a Retina MacBook, for some reason).
Thanks for the info on Pandora. I'll look into that!
BTW: as I understand, it's Apple's fault that the webkit PDF renderer doesn't create a TOC or clickable links. Will they ever fix that, you think?
Support Staff 15 Posted by Brett on 14 Aug, 2017 03:27 PM
The issue seems to be fixed in the latest versions of Safari, but the
SDK hasn't been updated to allow apps built with WebKit to take
advantage of the bugfix. I'm hoping to see it come down the line soon.
-Brett
16 Posted by Roel Van Gils on 14 Aug, 2017 07:50 PM
Thanks, Brett.
I just tried to print an exported HTML document (with TOC) from Safari (not even the Technology Preview) and the PDF indeed comes out just fine (with internal anchors that actually work). That's easier using a command line tool.
The one thing still missing is the built-in table of contents (View → Table of Contents in Preview.app). When delivering a document to clients, I find it not really acceptable to ship it without this TOC (it's a very convenient way to navigate large PDF files). Let's hope Apple adds this support to a future version of the SDK too. Although, wkhtmltopdf does it… so maybe it's possible somehow?
For now, I think I'll just stick with wkhtmltopdf and experiment some more with all the command line options it offers.