[tw5] Re: copy button in each code block

2023-06-07 Thread PMario 
On Friday, February 24, 2023 at 5:47:50 AM UTC+1 yasai ya wrote:

Thank you!
Your post was very helpful.

But it looked like the CSS wouldn't apply without the macro tiddler was 
visible.


Defining some CSS code in an HTML STYLE tag is very useful for debugging 
and testing, but it should *not be used for production* code. 

The easiest way to define CSS code is to create a *tiddler *eg: `myStyles ` 
and *tag *it `$:/tags/Stylesheet` 
Save the tiddler and the CSS definitions will be active. 

So the *text *in the above mentioned myStyles tidddler will start as 
follows. There is no STYLE tag. Just the CSS code.

table.mycodeblock {
  border:   none;
  margin:   7px 0 11px;
}

This will make your code much friendlier to maintain. 

have fun!
mario

-- 
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/aeb197e5-8d18-484e-bede-7c7ef1cc1932n%40googlegroups.com.

[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) 
<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)
> 
>  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); }
>  }
> 
>
> <$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: <<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); }
>> }
>> 
>> 
>>
>>
>> ```$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;
>>

[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

2023-05-11 Thread Mike Andyl 
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)
>
> 
> 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 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); }
>>> }
>>>
>>> 
>>>
>>>
>>> in your tiddlers just write :
>>>
>>> <>> 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

[tw5] Re: copy button in each code block

2023-02-27 Thread 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}}> >
>> \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 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); }
>> }
>>
>> 
>>
>>
>> in your tiddlers just write :
>>
>> <> 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)
 <>
 ```
 $text$
 ```
 \end

 in your tiddlers just write:

 <>>>
 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

[tw5] Re: copy button in each code block

2023-02-23 Thread 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}}
> \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 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); }
> }
>
> 
>
>
> in your tiddlers just write :
>
> < 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)
>>> <>
>>> ```
>>> $text$
>>> ```
>>> \end
>>>
>>> in your tiddlers just write:
>>>
>>> <>>
>>> 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.

[tw5] Re: copy button in each code block

2018-05-03 Thread 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}}
\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 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); }
}



in your tiddlers just write :

<>



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)
>> <>
>> ```
>> $text$
>> ```
>> \end
>>
>> in your tiddlers just write:
>>
>> <>
>> 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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/54a1e890-71d9-4862-a87b-a730a239e5d5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: copy button in each code block

2018-04-28 Thread Rustem 
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)
> <>
> ```
> $text$
> ```
> \end
>
> in your tiddlers just write:
>
> <
> 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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/c6fb87e7-6f54-4043-baae-4939c8e43d8d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: copy button in each code block

2018-04-28 Thread BurningTreeC 
hi @Rustem 

you could just create a macro in a tiddler say $:/_macros tagged with 
$:/tags/Macro with the content:

\define code(text)
<>
```
$text$
```
\end

in your tiddlers just write:

<>

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/d3e32b05-7580-485c-9b7c-fc111ea87fd0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: copy button in each code block

2018-04-28 Thread Rustem 
Yes, I mean code blocks, of course. 
I think the place to add the button is inside 
`CodeBlockWidget.prototype.render`, 
but not sure how to do it exactly.


On Wednesday, March 14, 2018 at 5:27:47 AM UTC-7, Matthew Lauber wrote:
>
> Pretty sure he means everything enclosed in triple backticks, per 
> https://tiddlywiki.com/#Code%20Blocks%20in%20WikiText
> ```
>
> 
>
> ```
>
>
>
> On Tuesday, March 13, 2018 at 8:39:53 PM UTC-4, TonyM wrote:
>>
>> Rustem,
>>
>> What do you define as a Code Block?
>>
>> How does it differ from the Text or other field?
>>
>> Regards
>> Tony
>>
>>
>> On Wednesday, March 14, 2018 at 11:10:42 AM UTC+11, Rustem wrote:
>>>
>>> Now that there is a `copy-to-clipboard` macro in the pre-release, could 
>>> someone figure out a way to have a "copy" button in a corner of each code 
>>> block, please? :) I used to have it in TW Classic, it was extremely useful.
>>>
>>

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/0d919cbb-cb72-482f-8653-50ffde7d6ce5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.