Introduction This is a Javascript and CSS tool to facilitate doing documentation for a Javascript web service. It provides a Javascript framework to take care of the complexity of writing the docs. The pages that use it are expected to be edited in HTML using a code editor. The goal is to make it so that each page can be edited easily with the JS taking care of making it look and act nicely. Generating Navigation Links The JS looks for blocks of the form <div class='contentItem' title='something good'> (the class, contentItem, is mandatory) and creates a local navigation link (<a href='#something_good'>something good</a>) in the side bar for each one of them that has a 'title' attribute. If no title attribute is found, no link will be generated. If an 'id' is present (eg, to customize the URL for the user), that will be used instead of one created from the title attribute. Content Generation JS also looks for a title, ie, <div class='title'>some text</div>. If it does not find one, it creates one using the text in the HTML help You do not have to insert <p> tags into $('.commentary') blocks. Instead, consecutive carriage returns (of the unix, \n, sort) are used to find paragraphs and the wrap them into paragraphs. Any HTML that you might use is left intact. White space between carriage returns is ignored. Since this tool is made primarily for displaying code, the base CSS includes a definition for a special tag, <snippet>. It sets the font-family to monospace and increases the size a little so it looks nice. This can, of course, be enhanced in the calling page. The page applies Google <pre class='prettyprint'> tags. Adding the 'linenums' class adds line numbers. adding the 'hidden' class makes the block invisible. It is, however, still formatted and executed. The minimum leading tags are also stripped so that the leftmost lines are at the left of the block. Code Execution JS looks for $('.contentContainer').find('.code'). It concatenates them, wraps it in a function (to limit scope) and adds a reference to a target div to write the results. This is referenced in the code with a variable named 'codeOutputDivId'. In the process, it looks for $('.contentContainer').find('.codeOutputDiv'). If it is not found, one is generated. In either case, it added to the code string before execution. Two Problems Notice that something in the interaction between the html parser and the code literal seems to screw up html. You can use HTML entities, &lt; and &gt;. JS will convert these to angle braces for code execution. Also, you must only use block comments, ie, "/* some stuff */" even if you would normally be able to use line comments "// some stuff to end of line". When the execution process takes the code from the block, it is all one line and that breaks everything. Code Editing Finally, this page is 'contenteditable' in all browsers that support it. For code blocks, you will see a 'redraw' button when you click on the code. When you click on that button, it will rerun that code and present a new display in the codeOutputDiv. (An alert will be shown if you try to edit in a browser that doesn't support contenteditable.) Using the Tool View source. Do what comes naturally. You can click on the code below to edit it. Use 'redraw' to execute your changes
var outString='';
['hello', 'goodbye'].map(function(item){
outString="<div style='margin-top:10px;'>"+outString+"</div>";


This section is only here to allow the side bar navigation to show you a second entry and to show that you can have a .contentItem without the code if that's what you need.