[TW5] Looking for a way to fold code inside a tiddler

#1

I have simple TW 5.2.2 on Windows 11. TW is just one HTML file, nothing fancy.

I did some searching on the net and have not found a solution yet.

The problem. I’m doing a Python tutorial and making Tiddlers for several chapters of the tutorial, and for each chapter I’m saving the code I wrote as a backup. And because TW has a great search facility. I’m finding the programs I’m writing are getting longer and longer so I would like a way to “fold” the code to only show the first 3 lines, or something similar, this part isn’t critical. Then click on it to show all the lines which I could copy to the clipboard. Clicking the code again would fold it again.

Do you have any ideas?

I considered TW tabs but each tab is actually a separate tiddler which I didn’t really want. I’d like something to fold a section of code without making a new tiddler.

Thank you!

EDIT: I may have to upgrade to TW 5.2.5 as Kookma’s Section plugin seems to do what I want. GitHub - kookma/TW-Section: create, edit and manage big and lengthy tiddlers through sectioning

#2

In haste:

You might take a look at how this glossary tiddler captures the first line (up until the first \n) of the tiddlers being previewed:

https://ethicsatwes.tiddlyhost.com/#definitions

(Some of those tiddlers don’t have further lines, but some go on to discuss examples, contrasting terms, etc., which I didn’t want cluttering the birds-eye-view glossary.)

You could easily have a button switch back and forth beween showing the first 3 lines (along lines such as what was developed there) and showing the full text field (or whatever field you’re using).

#3

Yes it sounds to me like the section plugin would be the answer, although as the author of such a document you get to choose the elements to display. Mohamad’s shiraz tools contains a lot of elements like cards etc… that you can use.

The trick can be simply ensuring your content is sufficiently identified then you can create tools to tread that as you desire.

  • An example may be a macro or custom widget in which you place your code snippets. Then later you can add the fold all but three (perhaps 3 by default) lines feature.

These ideas are the result of some long sought features on mine, so I may return with some code examples. However I recommend an upgrade to the latest tiddlywiki version (always).

Accessing ts-raw without the slot widget?
#4

https://stretch.tiddlyhost.com/#

#5

Maybe a simple $reveal widget with fold buttons.

Python Reveal Example.tid (930 Bytes)

ezgif-7-e813d45434

#6

I was experimenting with a custom widget for you, to wrap your code snippet, display a preview and click to unfold. But it also makes it easy to introduce a copy to clipboard plugin.

  • I saw the possibility of a good general solution for any section of text and enjoyably ran down various rabbit holes.
  • I also saw value weaving it into other ideas that add value and simplify it at the same time.

I will post an example for your specific requirement shortly if possible.

#7

Unfortunately I have hit some barriers with approach for now, as reflected here Accessing ts-raw without the slot widget?

  • It could be done with a procedure but providing the code snippet will be best by putting it in a procedure rather than inline and wrapping it the a custom widget would allow.
  • I will comeback If I progress this.

Here is a quick example that can be customised further, but requires the code to exist within named variable/procedure;

  • the advantage being it can be used many times or used to refer to other variables.
\procedure show.it(block n:"0" lines:"3" )
   \procedure copy.button() <$button tooltip="copy to clipboard" message="tm-copy-to-clipboard" param=<<content>> class="tc-btn-invisible" >{{$:/core/images/copy-clipboard}}</$button>
<$let content={{{ [<block>getvariable[]] }}} show.it-state={{{ [<qualify $:/temp/show.it/>addsuffix<n>] }}} >
<$list filter="[<show.it-state>!has[title]]" variable=~>
<$button popup=<<show.it-state>> >{{$:/core/images/unfold-button}}</$button> <<copy.button>>
<pre><code><$list filter="[<content>splitregexp[\n]limit<lines>]" variable=line><$text text=<<line>>/><br></$list></code></pre>^^more ...^^
</$list>
<$list filter="[<show.it-state>has[title]]" variable=~>
<$button popup=<<show.it-state>> >{{$:/core/images/fold-button}}</$button> <<copy.button>>

<pre><code><<content>></code></pre>^^... less^^
</$list>
</$let>
\end show.it
\procedure myblock()
; my code block
: there
a
b
c
d
\end

<<show.it myblock>>

<<show.it myblock 1>>

<<show.it transclusion 2>>
  • You could also have a button to render the code (if tiddlywiki script/markdown)
<div>

<<content>>
</div>

I would be easy to extend to

  • detect existing tiddlers (rather than variables)
  • Not show the expand button if less than or equal to n lines
1 Like