Skip to content
A solution to display code in the browser and copy it to the clipboard
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Feature/move examples to top level (#6) Dec 13, 2018
examples Update example implementation Jan 9, 2019
img Improved + added new examples, and updated README (#4) Dec 13, 2018
tests Updated + added new tests Dec 23, 2018
.gitignore Added gh-pages script Dec 14, 2018
.npmignore Remove webpack config from tarball Dec 23, 2018 Update README image to show on npm page Dec 16, 2018
nightwatch-global.js Added nightwatch Dec 3, 2018
nightwatch.conf.js Updated to latest nightwatch, to purge deps w/security violations, + … Dec 4, 2018
package-lock.json 1.1.7 Jul 15, 2019
package.json 1.1.7 Jul 15, 2019
webpack.config.js Added babel to transpile build to es5 Dec 14, 2018



copy-code-block accepts a code file or code in a string. CCB returns the transformed code and a button that can copy the displayed code to the clipboard.

Below is the no frills default...

copy-code-block example image

Check out the examples for all the options.


I wanted to use @storybook/html to build HTML/CSS components and have the 'copy code to the clipboard' functionality from @storybook/addon-info. But this isn't currently supported, as of Dec, 2018.

Enter copy-code-block, a solution to display code in the browser and copy it to the clipboard.

BUT copy-code-block isn't just for storybook, it'll work anywhere javascript is used.

AND it HAS THE POWER OF GREYSKULL can syntax highlight any language.


Couldn't have done this without kgroat.


import copyCodeBlock from '@pickra/copy-code-block';
// OR
const copyCodeBlock = require('@pickra/copy-code-block');

Then add it to your code

import anHtmlFile from './anHtmlFile.html';





If you don't like the styles, you can override them.

import anHtmlFile from './anHtmlFile.html';
copyCodeBlock(anHtmlFile, options);

The options argument is an object. There are five customizable colors:

  • textColor
  • background
  • borderColor
  • buttonTextColor
  • buttonBackground

These are the colors used for color, backgroundColor, and borderColor for the entire code block as well as the copy button. If no buttonTextColor or buttonBackground is supplied, they fall back to textColor or background respectively.

You can find all the defaults here.

Syntax highlighting

If you want syntax highlighting, you'll need to npm install highlight.js. Then you need to initialize your language:

import hljs from 'highlight.js/lib/highlight';
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));

Or, if you want all of the languages:

import 'highlight.js';

Then, when you're calling copyCodeBlock, tell it what language to use:

import anHtmlFile from './anHtmlFile.html';
copyCodeBlock(anHtmlFile, { lang: 'xml' });

NOTE: the 1st argument passed to hljs.registerLanguage is the value for lang in copyCodeBlock's options object. The languages all have aliases. So if you wanted to use HTML, you could register it as html, a valid alias for xml...

hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));

...but you still have to require the xml language. Then use html as the lang value in copyCodeBlock's options object...

copyCodeBlock(anHtmlFile, { lang: 'html' });

If you supply lang: 'auto', this will tell highlight.js to attempt to automatically choose a language from whichever ones are loaded.

Syntax highlighting for specific code segments.

For an idea of how to do this look at the custom html example or the custom rust example.

NOTE: camelCase colors get converted to hyphen-case, such as metaString converts to meta-string in the rust example.

For a complete list of hljs classes, see their CSS class reference. To see which classes are used by a specific language, find the language from the complete list and look for properties called className.

Built-in syntax highlighting

Another option for styling the highlighted code is to choose any of hightlight.js's built-in styles by importing it as so:

import 'highlight.js/styles/a11y-light.css';

NOTE: using textColor may override the built-in syntax highlighting.


Requirements: node 6.0.0 or higher, npm 3.8.6 or higher

  • npm start, runs storybook


  • npm start
  • in a different terminal, npm t runs all the tests

To run 1 test file, prepend -- -t tests/theTestFileName.js

npm t -- -t tests/SimplHTML.js

To run 1 testcase, prepend --testcase "name of testcase"

npm t -- -t tests/SimplHTML.js --testcase "Simple HTML"
You can’t perform that action at this time.