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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/e4c97a87-6961-44f0-8071-0db5d018ea59n%40googlegroups.com.
