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!");

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