Blog / Productivity

Instant HTML List Items with Keyboard Maestro

Creating HTML list items (<li></li>) is a frequent task for me. Whether ordered (numbered, <ol></ol>) or unordered (bulleted, <ul></ul>), I create lists and list items in source code as well as articles and blog posts. Typing <li></li> around each list item or clicking the LI button in WordPress or another editor are both annoyances.

Convert Selection to List Items

Back when I was Windows-based, editing code in Nick Bradbury’s Homesite and later TopStyle editor, I made frequent use of the Convert Selection to List Items command. Convert Selection to List Items was extremely handy. It worked as you would expect: after selecting several paragraphs the command would wrap each paragraph in <li></li> tags. It didn’t matter if I selected one or fifty paragraphs; they all instantly became list items.

Incomplete, Inefficient Mac Editors

After making the wise choice to go all Mac, I immediately noticed a dearth of efficient, effective editors for HTML, CSS, and PHP. BBEdit, Bluefish, Brackets, Dreamweaver–none of them did half of what decades-old Homestyle or svelte TopStyle could for quick, easy, efficient blog writing and fundamental HTML and CSS tagging. BBEdit does have the Markup > Lists > List Items command to wrap each selected paragraph with <li></li> tags, but that’s a mouse action two levels deep on a menu. I want to right-click to access the command like in TopStyle, or, better yet, hit a keyboard shortcut to execute the command from the keyboard. While I can map that command to a keyboard shortcut in BBEdit’s preferences, custom keyboard shortcuts aren’t backed up anywhere in the event the preferences become corrupt, nor will they sync between my different Macs. Efficiency is important to me. My systems need to be in sync. Moreover, I don’t like having to rebuild shortcut mappings every time I buy a new Mac.

Keyboard Maestro to the Rescue

For a year I suffered, hand-typing <li></li> around my list items and using still rather clunky TextExpander replacements (;li and ;/li, respectively). Finally it dawned on me: Keyboard Maestro, that great equalizer for all things Mac, could give BBEdit and Bluefish the power and efficiency of Windows’ code editors! In fact, it can give that to any code or text editor—even TextWrangler, SimpleNote, and Evernote! Keyboard Maestro even automatically backs up and syncs such functionality across all my Macs!

The Keyboard Maestro Recipe

Create your new macro and give it a trigger. You can put it on a keyboard shortcut, the Keyboard Maestro status menu, a palette, or wherever you like. Then use the power of the For Each action to take whatever text you’ve highlighted and instantly wrap your paragraphs in <li></li> tags. The following image is the entire Keyboard Maestro macro you’ll need. You can recreate it yourself or simply download it.

Keyboard Maestro macro to convert selected text to HTML list items

How to Install the Downloaded Macro

After downloading this macro, open Keyboard Maestro Editor. Use the File > Import Macros command to locate and import the macro.

A Big Step

Naturally, there’s a lot more than simply automating list item tags involved in making BBEdit an efficient and keyboard-driven HTML, CSS, and PHP editor, and, between Keyboard Maestro and TextExpander, I’m almost done doing that. A big step in that direction is being able to type list items unencoded and have them instantly converted to properly <li></li> wrapped list items. If it’s a time-saver for you as it is for me, just use my Keyboard Maestro macro.

You may also like...