Hi Stuart, Glad to hear you like it. Please feel free to incorporate the TOC generation into Asciidoc and/or the User Guide. Mihai Bazon's Javascript code, and my edits to it, are under the GPL.
And, thanks for writing Asciidoc. It's a great tool. Troy Stuart Rackham wrote: > Hi Troy > > This is really neat, it's something a number of users have asked about. > > It would be be nice to incorporate your TOC generation into AsciiDoc. > Would you have an objections if I were to incorporate your notes into > the AsciiDoc User Guide (along with an acknowledgment of course)? I > assume, judging by the copyright notice, that the JavaScript code in > the public domain. > > > Kind regards > Stuart > > > Troy Hanson wrote: >> I thought this tip may be useful for others, so I'm sharing it here. >> >> Asciidoc normally does not insert a TOC (table of contents) into HTML >> output. While this can be achieved using docbook-generated HTML, >> there is an alternative, if you prefer Asciidoc's native HTML rendering. >> >> To see it in action, first view this example document: >> http://tpl.sourceforge.net/userguide.html >> >> Notice the TOC that sits on the right-hand side. (Your browser needs >> to have Javascript enabled, and its only been tested in Firefox and >> IE, so hopefully it looks right on your browser). Incidentally you >> may also notice the "top" navigational links that appear to the right >> of H3-level headers. >> >> As you may have surmised, the TOC was dynamically generated by some >> Javascript. The styling of the TOC was done via CSS. To use this >> technique, I added this line into my Asciidoc text document where I >> wanted the TOC to appear: >> >> include::toc.txt[] >> >> I have pasted the content of toc.txt later in this email. (Thanks to >> Mihai Bazon, for the dynamic TOC code, which I have modified somewhat.) >> >> To style the TOC and the "top" links, I appended some custom CSS, >> shown at this end of the email, to the default stylesheet in >> asciidoc/stylesheets/xhtml11.css. (Actually, I copied xhtml11.css and >> xhtml11-quirks.css to new files tdh.css and tdh-quirks.css, >> respectively, and then added the CSS to tdh.css.) >> >> Then I ran Asciidoc using the command: >> >> asciidoc --unsafe --out-file=html/userguide.html -a linkcss=1 -a >> theme=tdh txt/userguide.txt >> >> The resulting HTML document contains links to the external >> stylesheets, so I had to upload tdh.css and tdh-quirks.css to the >> webserver along with the HTML document. >> >> A couple of notes: I chose to derive the TOC from only the H2 and H3 >> headers. And the "top" link accompanies H3 headers. These are >> hardcoded into the Javascript (while not elegant code, it does the >> job). Also, my version of asciidoc is 7.x so I don't know if any >> changes are needed with newer versions. Lastly, I want to point out >> that I'm not an expert in the finer details of Asciidoc so, while my >> approach works, perhaps there is a simpler technique. >> >> FILES >> ------- >> >> First, below this line is the content of "toc.txt". It ends at the >> "endif" line: >> >> ifdef::backend-xhtml11[] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> >> >> <div id="toc"></div> >> <script> >> window.onload=generate_TOC >> >> /* Author: Mihai Bazon, September 2002 >> * http://students.infoiasi.ro/~mishoo >> * >> * Table Of Content generator >> * Version: 0.4 >> * >> * Feel free to use this script under the terms of the GNU General >> Public >> * License, as long as you do not remove or alter this notice. >> */ >> >> /* modified by Troy D. Hanson, September 2006. License: GPL */ >> >> function H_getText(el) { >> var text = ""; >> for (var i = el.firstChild; i != null; i = i.nextSibling) { >> if (i.nodeType == 3 /* Node.TEXT_NODE, IE doesn't speak constants >> */) >> text += i.data; >> else if (i.firstChild != null) >> text += H_getText(i); >> } >> return text; >> } >> >> function TOC_EL(el, text, level) { >> this.element = el; >> this.text = text; >> this.level = level; >> } >> >> function getHeadlines(el) { >> var l = new Array; >> var rx = /[hH]([2-3])/; >> // internal recursive function that scans the DOM tree >> var rec = function (el) { >> for (var i = el.firstChild; i != null; i = i.nextSibling) { >> if (i.nodeType == 1 /* Node.ELEMENT_NODE */) { >> if (rx.exec(i.tagName)) >> l[l.length] = new TOC_EL(i, H_getText(i), >> parseInt(RegExp.$1)); >> rec(i); >> } >> } >> } >> rec(el); >> return l; >> } >> >> function generate_TOC() { >> var parent = document.getElementById("toc"); >> var toc_hdr = document.createElement("div"); >> var toc_hdr_txt = document.createTextNode("CONTENTS"); >> toc_hdr.appendChild(toc_hdr_txt); >> /* toc_hdr.setAttribute("id","hdr"); */ >> toc_hdr.id = "hdr"; >> parent.appendChild(toc_hdr); >> var hs = getHeadlines(document.getElementsByTagName("body")[0]); >> for (var i = 0; i < hs.length; ++i) { >> var hi = hs[i]; >> var d = document.createElement("div"); >> if (hi.element.id == "") hi.element.id = "gen" + i; >> var a = document.createElement("a"); >> a.href = "#" + hi.element.id; >> a.appendChild(document.createTextNode(hi.text)); >> d.appendChild(a); >> d.className = "level" + hi.level; >> parent.appendChild(d); >> if (hi.level == 3) { >> var dvtop = document.createElement("div"); >> dvtop.className = "toplink"; >> dvtop.appendChild(document.createTextNode("^top^")); >> dvtop.onclick=function(){scrollTo(0,0);}; >> hi.element.appendChild(dvtop); >> } >> } >> } >> </script> >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> >> >> endif::backend-xhtml11[] >> >> >> Lastly, here is the custom CSS styling that I added to "tdh.css": >> >> #toc { >> float: right; >> font-family: sans-serif; border: 1px solid #000; >> margin: 0px 0px 20px 20px; >> padding: 0px; >> background: #f0f0f0; >> font-size: 80%; >> } >> >> #toc #hdr { >> color:#ffffff; >> background:#98b1c4; >> text-align:center; >> margin-bottom:5px; >> } >> >> #toc a:visited, #toc a:link { color:#000; text-decoration: none } >> #toc a:hover { color:#00f; text-decoration: underline; } >> >> #toc .level2 { margin-left: 1em; margin-top: 2px; margin-bottom: 2px; >> text-decoration: underline; } >> #toc .level3 { margin-left: 2em; font-size: 0.8em } >> >> .toplink { >> float: right; >> font-size: 50%; >> cursor: pointer; >> } >> >> >> >> >> >> _______________________________________________ >> Asciidoc-discuss mailing list >> Asciidoc-discuss@metaperl.com >> http://metaperl.com/cgi-bin/mailman/listinfo/asciidoc-discuss >> _______________________________________________ Asciidoc-discuss mailing list Asciidoc-discuss@metaperl.com http://metaperl.com/cgi-bin/mailman/listinfo/asciidoc-discuss
