Toggle CSS ?

[Bob Flandard]

Hello,

Is is possible to have a button (or similar functionality) that can toggle some CSS specific to a code block in a single tiddler? I'm trying to toggle word-wrapping for a single code block (not all code blocks in the wiki).

for example

```python

some python code here that may have long lines that I want to toggle the word wrapping for

```

... and I think I need to toggle the effect of the following CSS on and off

pre, code {
    word-wrap: normal;
    white-space: pre;
}

Thanks, Bob

[Mat]

Sure, you can make a separate stylesheet tiddler and toggle the $:/tags/Stylesheet tag on it. I.e a buttonwidget to set/unset that tag.

Or you can e.g use a revealwidget to toggle a styleblock i.e by putting your css between <style>...</style> inside the revealwidget.

<:-)

[TW Tones]

Or a style inside a conditional $list widget.

However when you do so consider defining a class or using the correct css to target the html element you want to "re-style" or you could restyle other things on the page and make a mess of your wiki.

Also consider using the tiddlers class field https://tiddlywiki.com/#Custom%20styles%20by%20user-class

• Backup before experimenting.
• Or if you must edit the html or tiddler if on node to reverse your mistake.

Also search for "custom data" on tiddlywiki.com to find how to use css data tags to target a tiddler with styles etc...

Regards

Tones

[bfla...@gmail.com]

Thanks Tones!

That looks interesting, I'll give it a try.

Regards, Bob