Scully - Using Copy To Clipboard Plugin To Add Copy Button In Code Snippets

When you build a technical blog that has code snippets, you might also need a feature that provides the facility to copy that code snippet in a clipboard. you might have seen in many technical blogs and documentation where it has a button or icon to copy the snippet.

 

 

Scully copy-to-clipboard plugin provides out of the box feature, We just need to use it in our application to add copy to the clipboard facility for code snippets. In this article, we will see how to use it. 

 

Checkout the previous Scully series articles, 

• Getting Started With Scully - Angular Static Site Generator
• Create Blogging Site With Angular And Scully
  
• Syntax Highlighting In Markdown For Blog made with Scully

We will continue with the previous portfolio example, If you want to code along, download or clone this github repository.

 

So let's get started.

 

Install Scully To Clipboard Plugin

Execute the following command to install a plugin.

npm install -D @scullyio/scully-plugin-copy-to-clipboard

Install Clipboard JS

This plugin requires the clipboard.js. Download it from here and add the clipboard.min.js in the assets folder of the angular application.

if you don't want to add clipboard.min.js in the assets folder, We can also provide a clipboard.js CDN path in the plugin config, that we will see in a later section.

 

Configure Scully Config 

Once the copy-to-clipboard plugin is installed, we need to configure it in ScullyConfig to use it for markdown file code snippets.

Copy-To-Clipboard plugin is a render plugin that means at the time of Scully build - after it transforms markdown file to HTML file, it will customize the rendered HTML to add copy button and its script to add copy to clipboard feature.

Import the copyToClipboard plugin in scully.[projectName].config.ts file. and add it in defaultPostRenderers property of ScullyConfig. 

import { ScullyConfig, setPluginConfig } from '@scullyio/scully';
import { copyToClipboard } from '@scullyio/scully-plugin-copy-to-clipboard';

setPluginConfig('md', { enableSyntaxHighlighting : true});

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "portfolio",
  outDir: './dist/static',
  defaultPostRenderers : [ copyToClipboard ],
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: "./blog"
      }
    },
  }
};

defaultPostRenderers will check for code snippets in each route and markdown files and add a copy button there. If you want to use it only for the blog/markdown files, you can provide it in its routes config,

import { ScullyConfig, setPluginConfig } from '@scullyio/scully';
import { copyToClipboard } from '@scullyio/scully-plugin-copy-to-clipboard';

setPluginConfig('md', { enableSyntaxHighlighting : true});

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "portfolio",
  outDir: './dist/static',
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      postRenderers: [ copyToClipboard ],
      slug: {
        folder: "./blog"
      }
    },
  }
};

This is all you need to do to use a copy-to-clipboard plugin in your application.

 

Output

 

Now to test the plugin by rebuilding the application with the following command

ng build --prod && npm run scully && npm run scully:serve

Isn't it simple to implement? Write your thoughts in the comment section.

Now let's see the additional features of this plugin.

 

Additional Features

Copy to Clipboard plugin provides additional plugin config option using which, you can set

• Custom button text for before copy and after copy, you can also use emojis.
• Attach a custom class to apply custom CSS to that button.
• Load clipboard.js from a different path, for example, loading it from CDN.

So let's see the example,  We will do the following customization

1. Change default button text
2. Customize button style
3. Load Clipboard.js from CDN

Set Plugin Config

import { ScullyConfig, setPluginConfig } from '@scullyio/scully';
import { copyToClipboard, CopyToClipboardPluginConfig } from '@scullyio/scully-plugin-copy-to-clipboard';

setPluginConfig('md', { enableSyntaxHighlighting : true});

setPluginConfig<CopyToClipboardPluginConfig>(copyToClipboard, {
  copyBtnInitialText : 'Copy 📄',
  copyBtnOnClickText : 'Copied! ✅',
  customBtnClass: 'copyToClipboardBtn',
  clipboardJSPath : 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js',
})

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "portfolio",
  outDir: './dist/static',
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      postRenderers: [ copyToClipboard ],
      slug: {
        folder: "./blog"
      }
    },
  }
};

Add custom copy button styles in styles.css

// styles.css

.copyToClipboardBtn {
  border-radius: 50px !important;
  border-color: purple !important;
  background: linear-gradient(45deg, var(--purple), var(--pink)) !important;
  color: white !important;
}

Now rebuild the app with the following command and test it.

ng build --prod && npm run scully && npm run scully:serve

 

As you can see, it has custom styles and text, you can also verify the clipboard.js download location in the developer console.

 

Summary

 

In this article, we have seen how to use the copy to clipboard plugin to add the copy code snippet feature. We have also seen its additional feature to customize the copy button.

 

I hope you like this article, provide your valuable feedback and suggestions in the comment section🙂.

If you feel this is useful to others please like and share.