MadCap has a blog post about adding a copy button to code blocks in Flare, found here.
Here’s what I had to do to get it working:
Step 1: Download the clipboard JavaScript and put it in your Resources/Scripts folder:
https://github.com/zenorocha/clipboard.js/archive/master.zip
Step 2: Add this to the <head> section:
<script src="../../../Resources/Scripts/clipboard.min.js">
Step 3: Before the final closing body tag (</body>), add this:
new ClipboardJS('.cbtn');
Note: I named the button cbtn.
Step 4: Enclose each code block like the following:
Note: The button class must match what you defined in step 3.
Note: The ID must be unique for each code block.
Note: I added the Default.ScreenOnly condition so that it doesn’t appear in PDF/Word.
Step 5: Add the following to your CSS file:
div.Code
{
position: relative;
overflow-x: auto;
}
p.Codeblock + button
{
position: absolute;
bottom: 0;
right: 0;
width: 26px;
height: 26px;
margin-bottom: 6pt;
background: url(/url/to/image/content-copy.png)
}
Note: I use an image for the button, defined in the CSS. If you don’t want an image, you can just put the plain text “Copy” in the HTML in step 4.
Note: The positioning places the button at the bottom right corner of the div.
Here is what the final output looks like:
Phlogtastic 