date:20230606

[tw5] Re: copy button in each code block

2023-06-06 Thread Mohammad

please see  [tw5] Re: copy button in each code block - Google Group (Read 
Only) - Talk TW (tiddlywiki.org) 


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)
> 
>  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: <>;
>  animation: 0.30s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>  animation-name: breathe,blink;
>  }
>  table.mycodeblock button:hover svg.tc-image-button {
>  fill: <>;
>  }
>  @keyframes blink {
>  from { opacity: 1; }
>  to   { opacity: .35; }
>  }
>  @keyframes breathe {
>  from { transform: scale(1); }
>  to   { transform: scale(1.5); }
>  }
> 
>
> <$wikify name="tx_copy" text={{{ 
> [<__tx__>trim[]]+[addprefix[]]+[addsuffix[]] }}}>
> <$set name="tx_show" value={{{ 
> []+[addprefix[]]+[addprefix 10>]+[addsuffix[]]+[addsuffix] }}}>
> 
> 
> 
> <>
> 
> 
> <$button class="tc-btn-invisible" 
> message="tm-copy-to-clipboard" param=<> 
> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
> 
> 
> 
> 
> 
> 
> \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)
>>
>> 
>> 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: <>;
>>   animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>>   animation-name: breathe,blink;
>> }
>> table.mycodeblock button:hover svg.tc-image-button {
>>   fill: <>;
>> }
>> @keyframes blink {
>>   from { opacity: 1; }
>>   to   { opacity: .35; }
>> }
>> @keyframes breathe {
>>   from { transform: scale(1); }
>>   to   { transform: scale(1.5); }
>> }
>> 
>> 
>>
>>
>> ```$tx$
>> ```
>>
>> <$button class="tc-btn-invisible" message="tm-copy-to-clipboard" 
>> param={{{ [<__tx__>trim[]] }}} 
>> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
>> \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)
>>>
>>> 
>>> 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: <>;
>>>   animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>>>   animation-name: breathe,blink;
>>> }
>>> table.mycodeblock button:hover svg.tc-image-button {
>>>   fill: <>;
>>> }
>>> @keyframes blink {
>>>   from { opacity: 1; }
>>>   to   { opacity: .35; }
>>> }
>>> @keyframes breathe {
>>>   from { transform: scale(1); }
>>>   to   { transform: scale(1.5); }
>>> }
>>> 
>>> 
>>>
>>> ```$tx$
>>> ```
>>> <$button class="tc-btn-invisible" 
>>> message="tm-copy-to-clipboard" param=<<__tx__>> 
>>> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
>>> \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

[tw5] Re: copy button in each code block

2023-06-06 Thread yasai ya

Updated.

```
\define code(tx)

 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: <>;
 animation: 0.30s cubic-bezier(.35, 0, .35, 1) 2 alternate;
 animation-name: breathe,blink;
 }
 table.mycodeblock button:hover svg.tc-image-button {
 fill: <>;
 }
 @keyframes blink {
 from { opacity: 1; }
 to   { opacity: .35; }
 }
 @keyframes breathe {
 from { transform: scale(1); }
 to   { transform: scale(1.5); }
 }


<$wikify name="tx_copy" text={{{ 
[<__tx__>trim[]]+[addprefix[]]+[addsuffix[]] }}}>
<$set name="tx_show" value={{{ 
[]+[addprefix[]]+[addprefix]+[addsuffix[]]+[addsuffix] }}}>



<>


<$button class="tc-btn-invisible" 
message="tm-copy-to-clipboard" param=<> 
tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}






\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)
>
> 
> 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: <>;
>   animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>   animation-name: breathe,blink;
> }
> table.mycodeblock button:hover svg.tc-image-button {
>   fill: <>;
> }
> @keyframes blink {
>   from { opacity: 1; }
>   to   { opacity: .35; }
> }
> @keyframes breathe {
>   from { transform: scale(1); }
>   to   { transform: scale(1.5); }
> }
> 
> 
>
>
> ```$tx$
> ```
>
> <$button class="tc-btn-invisible" message="tm-copy-to-clipboard" 
> param={{{ [<__tx__>trim[]] }}} 
> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
> \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)
>>
>> 
>> 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: <>;
>>   animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>>   animation-name: breathe,blink;
>> }
>> table.mycodeblock button:hover svg.tc-image-button {
>>   fill: <>;
>> }
>> @keyframes blink {
>>   from { opacity: 1; }
>>   to   { opacity: .35; }
>> }
>> @keyframes breathe {
>>   from { transform: scale(1); }
>>   to   { transform: scale(1.5); }
>> }
>> 
>> 
>>
>> ```$tx$
>> ```
>> <$button class="tc-btn-invisible" message="tm-copy-to-clipboard" 
>> param=<<__tx__>> 
>> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
>> \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)
>>> 
>>>
>>> ```$tx$
>>> ```
>>> <$button class="tc-btn-invisible" 
>>> message="tm-copy-to-clipboard" param=<<__tx__>> tooltip={{$:/language/
>>> Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}>> $button>
>>> \end
>>>
>>> 
>>> table.mycodeblock {
>>>   border:   none;
>>>   margin:   7px

[tw5] Re: copy button in each code block

2023-06-06 Thread yasai ya

Updated.
\define code(tx)  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: <>; 
animation: 0.30s cubic-bezier(.35, 0, .35, 1) 2 alternate; animation-name: 
breathe,blink; } table.mycodeblock button:hover svg.tc-image-button { fill: 
<>; } @keyframes blink { from { opacity: 1; } to { opacity: 
.35; } } @keyframes breathe { from { transform: scale(1); } to { transform: 
scale(1.5); } }  <$wikify name="tx_copy" text={{{ 
[<__tx__>trim[]]+[addprefix[]]+[addsuffix[]] }}}> <$set 
name="tx_show" value={{{ []+[addprefix[]]+[addprefix]+[addsuffix[]]+[addsuffix] }}}><>   <$button 
class="tc-btn-invisible" message="tm-copy-to-clipboard" param=<> 
tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
 
  \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)
>
> 
> 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: <>;
>   animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>   animation-name: breathe,blink;
> }
> table.mycodeblock button:hover svg.tc-image-button {
>   fill: <>;
> }
> @keyframes blink {
>   from { opacity: 1; }
>   to   { opacity: .35; }
> }
> @keyframes breathe {
>   from { transform: scale(1); }
>   to   { transform: scale(1.5); }
> }
> 
> 
>
>
> ```$tx$
> ```
>
> <$button class="tc-btn-invisible" message="tm-copy-to-clipboard" 
> param={{{ [<__tx__>trim[]] }}} 
> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
> \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)
>>
>> 
>> 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: <>;
>>   animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>>   animation-name: breathe,blink;
>> }
>> table.mycodeblock button:hover svg.tc-image-button {
>>   fill: <>;
>> }
>> @keyframes blink {
>>   from { opacity: 1; }
>>   to   { opacity: .35; }
>> }
>> @keyframes breathe {
>>   from { transform: scale(1); }
>>   to   { transform: scale(1.5); }
>> }
>> 
>> 
>>
>> ```$tx$
>> ```
>> <$button class="tc-btn-invisible" message="tm-copy-to-clipboard" 
>> param=<<__tx__>> 
>> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
>> \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)
>>> 
>>>
>>> ```$tx$
>>> ```
>>> <$button class="tc-btn-invisible" 
>>> message="tm-copy-to-clipboard" param=<<__tx__>> tooltip={{$:/language/
>>> Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}>> $button>
>>> \end
>>>
>>> 
>>> 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

[tw5] Re: copy button in each code block

[tw5] Re: copy button in each code block

[tw5] Re: copy button in each code block

3 matches

Site Navigation

Mail list logo

Footer information