Red Hat Bugzilla – Bug 838277
Last modified: 2014-10-19 19:01:01 EDT
This Google Dart documentation page allows you to select your operating system and it will display the appropriate topic.
Common topics remain, os-specific topics are hidden/displayed.
So for Programming with Apache Qpid, it would give the reader the ability to switch between C++, Python, and Java examples.
It uses a library called "dartswitcher".
I experimented with using a role attribute on a section, and it works. The issue is that the TOC remains, and the section numbering is then out of whack.
Next line of attack:
1. Use Modernizr to detect the capabilities of the browser and degrade gracefully
2. Try this approach to render the TOC and numbering in the browser, so that it will update when sections are displayed / hidden:
Something to consider: what does it mean when one of the visible sections refers to an invisible section?
Pusher.com have an approach that I just might be able to pull off in time for MRG 2.2.
We wrap our code samples like this in Docbook:
<listitem><programlisting language="C++">Sender sender = session.Sender("something")</programlisting></listitem>
<listitem><programlisting language="Python">sender = session.sender("something")</programlisting></listitem>
In standard HTML this renders as very readable output.
The HTML output of the above looks like this:
<div class="variablelist code-div">
<dt class="varlistentry code">
<pre class="programlisting C++">Sender sender=session.Sender(<span class="perl_String">"something"</span>)</pre>
<dt class="varlistentry code">
<pre class="programlisting Python">sender <span class="perl_Char">=</span> ssn.sender<span class="perl_Char">(</span><span class="perl_String">"something"</span><span class="perl_Char">)</span></pre>
So what we want to do with this is:
1. Find the .code-div class element
2. Create a <ul> element as the first child. This will be the tabs.
3. Create a <div> element directly below the <ul> element. This will be the container for the programlistings.
4. Next we select each <dt> element and the <dd> element directly after it
5. We make the inner HTML of the <dt> element a <li> in our <ul> from step 2.
6. We delete the <dt> node.
7. We give the <dd> element a unique ID, and inject it into the onclick() event in step 8.
8. We give our <li> element in step 5 an onclick() event. This event will hide all children of its .code-div, and show the injected <li>
So all you need to do is this:
You can add a "language" attribute to each <programlisting> element with no problems.
Code tabs are now alphasorted automatically in the html output, and the variablelist role to use is the more semantic 'codetabs'.
Atm the author has to set the language twice - once in the variablelist term to get the code tabs functionality, once in the programlisting language attribute to get syntax highlighting.
It makes sense to trigger the whole thing of the <programlisting> language attribute. In this case the variablelist <term> will be dropped, and the language extracted from the class of the <dd>.
To make "the other class of the dd who has a class of programlisting" reliable, the xsl should be modified to write "language-XXX" as the class. Investigate!