Styling - Fluid Topics - Latest

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

--ft-button-background-color

--ft-button-color

--ft-button-icon-size

--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:

1. Add the following example to a Markdown document:

   <ft-copy-block>console.log("Hello world!")</ft-copy-block>
   

2. Publish the Markdown document.

3. Add the following example to the portal's Content styles:

   ft-copy-block {
     font-family: monospace, monospace;
     --ft-button-background-color: transparent;
     --ft-button-color: indigo;
     --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;
   }
   

This styling results in the following example:

console.log("Hello world!")