[tw5] Re: copy button in each code block

Google Group (Read Only)
#1

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$
<$button class="tc-btn-invisible" message="tm-copy-to-clipboard" param=<> 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:
#2

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

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

Full code

1 Like
#3

Can someone explain how to use this?

понедельник, 27 февраля 2023 г. в 13:00:01 UTC+3, yasai ya:

#4

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={{{ [<tx_copy>]+[addprefix[
]]+[addprefix<charcode 13 10>]+[addsuffix[
]]+[addsuffix<charcode 13 10>] }}}>
<<tx_show>> <$button class=“tc-btn-invisible” message=“tm-copy-to-clipboard” param=<<tx_copy>> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}} </$button>
</$set> </$wikify> \end

2023年2月27日月曜日 19:00:01 UTC+9 yasai ya:

#5

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:

1 Like
#6

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

#7

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

1 Like