New to the community? Start here

Freebie: Indented Text to HTML Converter

As some of you may have noticed, I’ve been working on documentation for the WPMU DEV plugins and themes. Part of the documentation on the primary page for each plugin consists of a, expandable/collapsible tree (an unordered list with glyphs) listing the contents of the plugin folder. Now, generating this by hand has been a relatively easy task for most of the plugins. However, last night I began working on the documentation for Snapshot and quickly realized creating the directory listing by hand would be incredibly cumbersome (Snapshot contains 709 items). I did some Google searches, but wasn’t able to find any online tools for converting a plain text list to an HTML list. I did find several python scripts and other miscellaneous scripts to do it, but what I wanted was (and what I’m sure others could use is) a JavaScript-based tool for doing so.

After a bit more research, I found a CoffeeScript which did (mostly) what I needed, but it had some bugs and turned out to be almost unusable. I spent a few hours working on the issue, and eventually posted over on StackOverflow. A helpful StackOverflow user was able to craft a script to do exactly what I wanted (i.e., converted an indented plain-text list to a properly marked-up HTML list).

I’ve created a temporary home for the script (while I work on a more permanent page to host it) here. n.b., if you plan on bookmarking the script for later use, please bookmark the shortlink (i.e., http://z13.me/HTML-ListGenerator ) not the actual location (which will be changing in the near future).

I figure this will be useful to other members of the community. At least I find myself having to convert lists into HTML with relative frequency. This is a far easier (and far faster) solution than manually coding lists each time they are needed.

Sat, 14 Dec 2013 3:54:30
  • Zyniker
    • WordPress Warrior

    Thanks to the same helpful person over on StackOverflow, the drop-down selector and the Glyphicons checkbox are now both working. For those working on OS X, BBEdit has a very helpful ability to generate the type of list you’ll want to input into this conversion tool when making a directory tree. Just drag and drop your folder into BBEdit and it’ll generate an indented hierarchical list of the items in the folder.

  • Zyniker
    • WordPress Warrior

    Update: I’ve created a new, permanent home for the script. The shortlink has been updated (and should point to the correct place for anyone who doesn’t have the old one cached). I’ll keep the old location live for a few days to ensure people who clicked the link when it pointed to the old location have time to clear their caches/allow them to expire.

  • Zyniker
    • WordPress Warrior

    Update: I went through the JavaScript code on that page and discovered a small bug. It was producing code which rendered properly, but was not entirely syntactically correct. As proper syntax is, naturally, important, the code has been completely rewritten, taking advantage of a cleaner jQuery methodology, and now produces syntactically correct code. The short URL remains the same: http://z13.me/HTML-ListGenerator (and points to its new, permanent home).

    It may be worth noting that the page takes advantage of a (small) CSS tweak related to the open-folder glyphicon (which is a tad wide, and, thus, tends to encroach upon its neighbouring text); that tweak is as follows:

    The conversion now automatically minifies the result, too, which is useful for larger lists (e.g., the listing of Snapshot’s folder contents).

    span.glyphicon-folder-open {
    
padding-right: 1.5em;
    
}