Add Copy to Clipboard Button in Codeblocks - Fluid Topics - Latest

Adding a copy to clipboard button to codeblocks in software documentation can help users perform a task more quickly, reliably, and safely.

1. Open content to edit.

2. Add a <pre> element, and give it the ft-copy-block class.

   For example:

   <pre class="ft-copy-block"><code>console.log("Hello, World!");</code></pre>
   

   Do not insert spaces or line breaks between <pre> and <code>. They can appear in the published content of the codeblock.

3. Publish the document to a Fluid Topics portal.

Result:

console.log("Hello, World!");

To style copy to clipboard codeblocks, use the following CSS properties:

• --ft-copy-block-background-color
• --ft-copy-block-border-color
• --ft-copy-block-border-radius
• --ft-copy-block-border-style
• --ft-copy-block-border-width
• --ft-copy-block-button-height
• --ft-copy-block-spacing

For example, add the following to the portal's Content styles:

ft-copy-block {
  --ft-copy-block-background-color: rgb(230, 230, 234);
  --ft-copy-block-border-color: indigo;
  --ft-copy-block-border-style: dotted;
  --ft-copy-block-border-width: 5px;
}

It is possible to use the outputclass attribute to assign the ft-copy-block HTML class to a <codeblock> element in DITA.

For example:

<codeblock outputclass="ft-copy-block">console.log("Hello, World!");</codeblock>

It is possible to use the style map feature to assign the ft-copy-block HTML class to parts of a Microsoft Word document.

For example, for an code style paragraph, use the following style map:

pre.ft-copy-block:
  - code

It is possible to use the role attribute to assign the ft-copy-block HTML class to a <programlisting> element in Paligo.

For example:

<programlisting role="ft-copy-block">console.log("Hello, World!");</programlisting>