Blog / Productivity

Instant HTML List Items with Keyboard Maestro

Creating HTML list items (<li></li>) is a fre­quent task for me. Whether ordered (num­bered, <ol></ol>) or unordered (bul­let­ed, <ul></ul>), I cre­ate lists and list items in source code as well as arti­cles and blog posts. Typing <li></li> around each list item or click­ing the LI but­ton in WordPress or anoth­er edi­tor are both annoy­ances.

Convert Selection to List Items

Back when I was Windows-based, edit­ing code in Nick Bradbury’s Homesite and lat­er TopStyle edi­tor, I made fre­quent use of the Convert Selection to List Items com­mand. Convert Selection to List Items was extreme­ly handy. It worked as you would expect: after select­ing sev­er­al para­graphs the com­mand would wrap each para­graph in <li></li> tags. It didn’t mat­ter if I select­ed one or fifty para­graphs; they all instant­ly became list items.

Incomplete, Inefficient Mac Editors

After mak­ing the wise choice to go all Mac, I imme­di­ate­ly noticed a dearth of effi­cient, effec­tive edi­tors for HTML, CSS, and PHP. BBEdit, Bluefish, Brackets, Dreamweavernone of them did half of what decades-old Homestyle or svelte TopStyle could for quick, easy, effi­cient blog writ­ing and fun­da­men­tal HTML and CSS tag­ging. BBEdit does have the Markup > Lists > List Items com­mand to wrap each select­ed para­graph with <li></li> tags, but that’s a mouse action two lev­els deep on a menu. I want to right-click to access the com­mand like in TopStyle, or, bet­ter yet, hit a key­board short­cut to exe­cute the com­mand from the key­board. While I can map that com­mand to a key­board short­cut in BBEdit’s pref­er­ences, cus­tom key­board short­cuts aren’t backed up any­where in the event the pref­er­ences become cor­rupt, nor will they sync between my dif­fer­ent Macs. Efficiency is impor­tant to me. My sys­tems need to be in sync. Moreover, I don’t like hav­ing to rebuild short­cut map­pings every time I buy a new Mac.

Keyboard Maestro to the Rescue

For a year I suf­fered, hand-typing <li></li> around my list items and using still rather clunky TextExpander replace­ments (;li and ;/li, respec­tive­ly). Finally it dawned on me: Keyboard Maestro, that great equal­iz­er for all things Mac, could give BBEdit and Bluefish the pow­er and effi­cien­cy of Windows’ code edi­tors! In fact, it can give that to any code or text editor—even TextWrangler, SimpleNote, and Evernote! Keyboard Maestro even auto­mat­i­cal­ly backs up and syncs such func­tion­al­i­ty across all my Macs!

The Keyboard Maestro Recipe

Create your new macro and give it a trig­ger. You can put it on a key­board short­cut, the Keyboard Maestro sta­tus menu, a palette, or wher­ev­er you like. Then use the pow­er of the For Each action to take what­ev­er text you’ve high­light­ed and instant­ly wrap your para­graphs in <li></li> tags. The fol­low­ing image is the entire Keyboard Maestro macro you’ll need. You can recre­ate it your­self or sim­ply down­load it.

Keyboard Maestro macro to convert selected text to HTML list items

How to Install the Downloaded Macro

After down­load­ing this macro, open Keyboard Maestro Editor. Use the File > Import Macros com­mand to locate and import the macro.

A Big Step

Naturally, there’s a lot more than sim­ply automat­ing list item tags involved in mak­ing BBEdit an effi­cient and keyboard-driven HTML, CSS, and PHP edi­tor, and, between Keyboard Maestro and TextExpander, I’m almost done doing that. A big step in that direc­tion is being able to type list items unen­cod­ed and have them instant­ly con­vert­ed to prop­er­ly <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...