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.

Reply via email to