Sorry, it wasn't fixed at all, but finally I fixed the problem. param=<<__tx__>> ↓ param={{{ [<__tx__>trim[]] }}}
Full code --- \define code(tx) <style> table.mycodeblock { border: none; margin: 7px 0 11px; } table.mycodeblock pre { margin: 0; } table.mycodeblock td { border: none; padding: 0; position: relative; } table.mycodeblock button { position: absolute; left: -30px; top: 2px; } table.mycodeblock button svg.tc-image-button { height: 2em; width: 2em; fill: none; } table.mycodeblock:hover button svg.tc-image-button { fill: <<color tiddler-controls-foreground>>; animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate; animation-name: breathe,blink; } table.mycodeblock button:hover svg.tc-image-button { fill: <<color orange>>; } @keyframes blink { from { opacity: 1; } to { opacity: .35; } } @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.5); } } </style> <table class="mycodeblock"><tr><td> ```$tx$ ``` </td><td><$button class="tc-btn-invisible" message="tm-copy-to-clipboard" param={{{ [<__tx__>trim[]] }}} tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}</$button></td></tr></table> \end 2023年2月24日金曜日 13:47:50 UTC+9 yasai ya: > Thank you! > Your post was very helpful. > > But it looked like the CSS wouldn't apply without the macro tiddler was > visible. > > So I modified it like this. > > ``` > \define code(tx) > > <style> > table.mycodeblock { > border: none; > margin: 7px 0 11px; > } > table.mycodeblock pre { > margin: 0; > } > table.mycodeblock td { > border: none; > padding: 0; > position: relative; > } > table.mycodeblock button { > position: absolute; > left: -30px; > top: 2px; > } > table.mycodeblock button svg.tc-image-button { > height: 2em; > width: 2em; > fill: none; > } > table.mycodeblock:hover button svg.tc-image-button { > fill: <<color tiddler-controls-foreground>>; > animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate; > animation-name: breathe,blink; > } > table.mycodeblock button:hover svg.tc-image-button { > fill: <<color orange>>; > } > @keyframes blink { > from { opacity: 1; } > to { opacity: .35; } > } > @keyframes breathe { > from { transform: scale(1); } > to { transform: scale(1.5); } > } > </style> > <table class="mycodeblock"><tr><td> > > ```$tx$ > ``` > </td><td><$button class="tc-btn-invisible" message="tm-copy-to-clipboard" > param=<<__tx__>> > tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}</$button></td></tr></table> > \end > ``` > > I'm newbie to HTML, so if there are any problems with this approach, I'd > appreciate it if you could let me know. > 2018年5月4日金曜日 3:39:32 UTC+9 Rustem: > >> I managed to do it with just macros and CSS. One thing I could not avoid >> is copying line breaks before and after the code. Hope there will be a >> plugin someday that will overcome that, as well as do away with the table >> wrapper. Here is a self-contained demo tiddler. >> >> \define code(tx) >> <table class="mycodeblock"><tr><td> >> >> ```$tx$ >> ``` >> </td><td><$button class="tc-btn-invisible" >> message="tm-copy-to-clipboard" param=<<__tx__>> tooltip={{$:/language/ >> Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}</$button >> ></td></tr></table> >> \end >> >> <style> >> table.mycodeblock { >> border: none; >> margin: 7px 0 11px; >> } >> table.mycodeblock pre { >> margin: 0; >> } >> table.mycodeblock td { >> border: none; >> padding: 0; >> position: relative; >> } >> table.mycodeblock button { >> position: absolute; >> left: -30px; >> top: 2px; >> } >> table.mycodeblock button svg.tc-image-button { >> height: 2em; >> width: 2em; >> fill: none; >> } >> table.mycodeblock:hover button svg.tc-image-button { >> fill: <<color tiddler-controls-foreground>>; >> animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate; >> animation-name: breathe,blink; >> } >> table.mycodeblock button:hover svg.tc-image-button { >> fill: <<color orange>>; >> } >> >> @keyframes blink { >> from { opacity: 1; } >> to { opacity: .35; } >> } >> @keyframes breathe { >> from { transform: scale(1); } >> to { transform: scale(1.5); } >> } >> >> </style> >> >> >> in your tiddlers just write : >> >> <<code """ >> code here >> more code >> """>> >> >> >> >> On Saturday, April 28, 2018 at 5:17:04 PM UTC-7, Rustem wrote: >>> >>> That works, thanks. Would be great though, to have the button appear >>> inside the block, on hover. >>> >>> On Saturday, April 28, 2018 at 2:31:13 AM UTC-7, BurningTreeC wrote: >>>> >>>> hi @Rustem >>>> >>>> you could just create a macro in a tiddler say $:/_macros tagged with >>>> $:/tags/Macro with the content: >>>> >>>> \define code(text) >>>> <<copy-to-clipboard """$text$""">> >>>> ``` >>>> $text$ >>>> ``` >>>> \end >>>> >>>> in your tiddlers just write: >>>> >>>> <<code """ >>>> >>>> code here >>>> >>>> more code >>>> >>>> """>> >>>> >>> -- 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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/86767cdc-a2ce-4263-90c1-fa8d878b5466n%40googlegroups.com.