Overview
Adding a copy to clipboard button to codeblocks in software documentation can help users perform a task more quickly, reliably, and safely.
For most formats, this procedure requires the ability to insert HTML in content. For exceptions, see Examples.
Procedure
- Open content to edit.
-
Add a
<pre>
element, and give it theft-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. -
Publish the document to a Fluid Topics portal.
Result:
console.log("Hello, World!");
Examples
DITA
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>
Microsoft Word
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