To prevent tiddlywiki from wikifying the content of your tiddler, you can use a pragma <https://tiddlywiki.com/#Pragma>rule at the beginning of the tiddler :
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html You can also use wikitext to "escape" css. For example, if you try to set a CSS variable inside a <style> tag, tiddlywiki will parse -- and make it into a -. To prevent this you can turn it into a code snippet : `--` This way you keep your formatting. $(..)$ is for text substitution of a variable defined outside of a macro, see https://tiddlywiki.com/#Macro%20Definitions%20in%20WikiText I have made a post on tiddlytalk that explain how to display svg icon next to links inside tiddlers, check it out : https://talk.tiddlywiki.org/t/trick-to-convert-the-core-images-to-svg-image-for-css-background/802 Online demo : https://telumire.be/TiddlyTweaks/index.html#:%5B%5B%24:/ThemeTweaks/svg/style/external_link%5D%5D Le samedi 11 décembre 2021 à 06:31:03 UTC+1, [email protected] a écrit : > I'm trying to get a stylesheet working that will automatically insert the > SVG icon before the link text. Here's what I have so far: > > \define link-icon-style() > <$set name="uri" value=<<makedatauri """$(tid)$""" "text/plain">> > > <$set name="icon" tiddler=<<tid>> field="icon"> > <$set name="iconsrc" tiddler=<<icon>> > > <$list variable="urititle" > filter="""[<uri>removeprefix[data:text/plain,]]"""> > <style> > a[href="#<<urititle>>"] { display: inline-flex; align-items: > baseline; gap: .15em; } > a[href="#<<urititle>>"]:before { content: <<makedatauri > """$(iconsrc)$""" "image/svg+xml">>; width: 1em; height: 1em; margin-top: > 2px; align-self: center; fill: <<colour tiddler-link-foreground>>; } > </style> > </$list> > </$set> > </$set> > </$set> > \end > > <$list filter="""[has[icon]]"""> > <$vars tid={{!!title}}> > <<link-icon-style>> > </$vars> > </$list> > > When I inspect the DOM and look at the <style> tag created, the value of > my `content` CSS rule shows as an <a>... specifically a TiddlyWiki external > link. I think some value is being interpreted as WikiText instead of plain > text somewhere, but I'm several hours deep into head-banging on the issue > so I'm reaching out for help. > > I'm a veteran JS programmer but a TiddlyWiki n00b. :) > > Anyone see what I'm doing wrong here? > > --- > > Also, what is the $()$ syntax? I couldn't find documentation on it... I'm > guessing because I don't know what it's called and thus don't know the > right term to search for. > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/72c6efb9-5275-469d-a7b5-946f74847fa6n%40googlegroups.com.
