please see [tw5] Re: copy button in each code block - Google Group (Read Only) - Talk TW (tiddlywiki.org) <https://talk.tiddlywiki.org/t/tw5-re-copy-button-in-each-code-block/6293/5>
Ask your question in new official forum talk.tiddlywiki.org On Wednesday, June 7, 2023 at 6:24:47 AM UTC+3:30 yasai ya wrote: > Updated. > > ``` > \define code(tx) > <style> > table.mycodeblock { > border: none; > margin: 0px; > vertical-align: middle; > display: inline-table; > } > table.mycodeblock pre { > margin: 0px; > } > table.mycodeblock td { > border: none; > padding: 0.1em; > position: relative; > } > table.mycodeblock button { > position: absolute; > left: -30px; > top: 12px; > } > 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.30s 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> > > <$wikify name="tx_copy" text={{{ > [<__tx__>trim[]]+[addprefix[<p>]]+[addsuffix[</p>]] }}}> > <$set name="tx_show" value={{{ > [<tx_copy>]+[addprefix[<pre>]]+[addprefix<charcode 13 > 10>]+[addsuffix[</pre>]]+[addsuffix<charcode 13 10>] }}}> > <table class="mycodeblock"> > <tr> > <td> > <<tx_show>> > </td> > <td> > <$button class="tc-btn-invisible" > message="tm-copy-to-clipboard" param=<<tx_copy>> > tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}} > </$button> > </td> > </tr> > </table> > </$set> > </$wikify> > \end > ``` > 2023年2月27日月曜日 19:00:01 UTC+9 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/e4c97a87-6961-44f0-8071-0db5d018ea59n%40googlegroups.com.