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/56f0b616-4d49-4ec9-8197-ea3add4b7c08n%40googlegroups.com.