copy button in each code block

[Rustem]

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.

[TonyM]

Rustem,

What do you define as a Code Block?

How does it differ from the Text or other field?

Regards

Tony

[Matthew Lauber]

Pretty sure he means everything enclosed in triple backticks, per https://tiddlywiki.com/#Code%20Blocks%20in%20WikiText

```

....

```

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




[BurningTreeC]

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

""">>

[Rustem]

That works, thanks. Would be great though, to have the button appear inside the block, on hover.

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

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

```

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:

[yasai ya]

Sorry, it wasn't fixed at all, but finally I fixed the problem.

param=<<__tx__>>
↓
param={{{ [<__tx__>trim[]] }}}

Full code
---

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

[yasai ya]

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:

[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

[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