Outside of tiddlywiki.com where there are some macros to do it, how do people show examples of a widget? Have two copies of its use one quoted so it shows verbatim and the other being wikified to show the effect? Are there simple macros to avoid the two copies?
I’d do this without digging into other possible ways (as in too lazy to see if there is a better way, because this is good enough for me):
\define exampleWidget()
<$button>
<$action-confirm $message="Do you wish to delete the caption and tags?">
Delete "caption" and "tags"
</$action-confirm>
</$button>
\end
<pre><$text text={{{ [<exampleWidget>] }}}/></pre>
<<exampleWidget>>
3 Likes
You can use the Code Procedure from the TW Utility tools by @Mohammad.
Wrap the code procedure inside another procedure that will do the work of displaying both the code and a live example. Pass the widget as a parameter:
Procedure code
\procedure br-example(src)
<$transclude $variable="code" src=<<src>>/>
<$transclude $variable="src"/>
\end
Procedure call
<<br-example src:"""<$list filter="[tag[info]]"><$link/><br></$list>""">>
Procedure output
1 Like
Before we had the code-body field for tiddlers we used <pre><code><$view/></code></pre> in the core, to show the whole content of a tiddler.
So the difference between Charlie’s approach and this one is
-
<pre><$text… shows a specific macro, procedure … -
<pre><$view… shows the whole tiddler
The code-body field will show the code of the whole tiddler, but will not render the wikitext
Eg:
\define exampleWidget()
<$button>
<$action-confirm $message="Do you wish to delete the caption and tags?">
Delete "caption" and "tags"
</$action-confirm>
</$button>
\end
<pre><code><$view/></code></pre>
<<exampleWidget>>
Screenshot
It will show the source of the whole tiddler and also render the wikitext.
1 Like