Can someone explain how to use this? понедельник, 27 февраля 2023 г. в 13:00:01 UTC+3, yasai ya:
> 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/5ee4c588-6277-42dc-87e4-c762650fba28n%40googlegroups.com.