Blog / Productivity

Instant HTML List Items with Keyboard Maestro

Creating HTML list items (

  • ) is a fre­quent task for me. Whether ordered (num­bered,
      ) or unordered (bul­let­ed,
        ), I cre­ate lists and list items in source code as well as arti­cles and blog posts. Typing 
      • 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 

      • 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

      • 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

      • 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 

      • 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

      • 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...

        %d bloggers like this: