A Documentation Macro to Explain Steps

Sometimes in your Tiddlywiki you like to show steps through for doing some tasks! For example you want to explain how to change the sidebar width from $:/ControlPanel page and menu! The below macro helps you to have a better style for such instruction!

  1. Open https://tiddlywiki.com/
  2. Create a new tiddler
  3. Tag it with $:/tags/Macro
  4. Put the below script in your tiddler body and save
\define docu(steps:"", acolor:"", bcolor:"", arrow:"$:/core/images/right-arrow")
\whitespace trim
<style>.kk-docu svg{width: 0.9em;height: 0.9em;vertical-align:middle;margin:0 4px;}
.kk-docu b{font-size:0.8em; border:1px solid #ccc;border-radius:5px;padding:1px;}</style>
<span class="kk-docu">
<$list filter="[enlist<__steps__>butlast[]]" variable=step>
<b style="background:$bcolor$;"><$text text=<<step>>/></b>
<span style="fill:$acolor$;"><$transclude tiddler=<<__arrow__>> /></span>
<b style="background:$bcolor$;"><$text text={{{ [enlist<__steps__>last[]] }}}  /></b>

Now call it everywhere you like

Example: In a new tiddler write

<<docu "Sidebar [[More tab]] Explorer">>

<<docu "$:/ControlPanel Appearance [[Theme Tweaks]] Settings" red>>

<<docu "Sidebar Contents Features Notifications" blue yellow>>

and you get:


  • colors and arrow are customizable!
  • hackable to change look and feel

The code and example for download: docu-macro.json (1.0 KB)

I think docu for document is not a self explaining name! propose/use a better one!


I think either “explain” or “howto” could be good names. You say it yourself:

I like explain! :wink: It is better than docu

<<explain "Sidebar [[More tab]] Explorer">>
1 Like

Maybe “breadcrumbs”?