{"id":17092944,"url":"https://github.com/pickra/copy-code-block","last_synced_at":"2025-08-17T16:45:00.668Z","repository":{"id":33719430,"uuid":"160126995","full_name":"Pickra/copy-code-block","owner":"Pickra","description":"A solution to display code in the browser and copy it to the clipboard","archived":false,"fork":false,"pushed_at":"2023-01-14T00:06:14.000Z","size":3161,"stargazers_count":32,"open_issues_count":20,"forks_count":181,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T22:05:20.745Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pickra.github.io/copy-code-block/.","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pickra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-03T03:25:06.000Z","updated_at":"2025-01-02T18:01:53.000Z","dependencies_parsed_at":"2023-01-15T02:12:09.233Z","dependency_job_id":null,"html_url":"https://github.com/Pickra/copy-code-block","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pickra%2Fcopy-code-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pickra%2Fcopy-code-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pickra%2Fcopy-code-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pickra%2Fcopy-code-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pickra","download_url":"https://codeload.github.com/Pickra/copy-code-block/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411231,"owners_count":20934653,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T14:03:53.377Z","updated_at":"2025-04-05T23:06:52.462Z","avatar_url":"https://github.com/Pickra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @pickra/copy-code-block\n\n- [What](#what)\n- [Why](#why)\n- [Credit](#credit)\n- [Usage](#usage)\n- [Custom Styles](#If-you-don't-like-the-styles,-you-can-override-them)\n- [Syntax Highlighting](#Syntax-highlighting)\n- [Syntax Highlighting For Specific Code Segments](#Syntax-highlighting-for-specific-code-segments)\n- [Built-in syntax highlighting](#Built-in-syntax-highlighting)\n- [Dev](#dev)\n- [Tests](#tests)\n\n## What\ncopy-code-block accepts a code file or code in a string. CCB returns the transformed code and\na button that can copy the displayed code to the clipboard.\n\nBelow is the no frills default...\n\n![copy-code-block example image](https://raw.githubusercontent.com/Pickra/copy-code-block/master/img/CCB.png)\n\nCheck out the [examples](https://pickra.github.io/copy-code-block/) for all the options.\n\n## Why\nI wanted to use [@storybook/html](https://www.npmjs.com/package/@storybook/html) to build HTML/CSS\ncomponents and have the 'copy code to the clipboard' functionality from [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info). But this isn't [currently supported](https://github.com/storybooks/storybook/issues/4832), as of Dec, 2018.\n\nEnter `copy-code-block`, a solution to display code in the browser and copy it to the clipboard.\n\nBUT `copy-code-block` isn't just for storybook, it'll work anywhere javascript is used.\n\nAND it ~~HAS THE POWER OF GREYSKULL~~ can syntax highlight any language.\n\n## Credit\nCouldn't have done this without [kgroat](https://github.com/kgroat).\n\n## Usage\n```javascript\nimport copyCodeBlock from '@pickra/copy-code-block';\n// OR\nconst copyCodeBlock = require('@pickra/copy-code-block');\n```\nThen add it to your code\n```javascript\nimport anHtmlFile from './anHtmlFile.html';\ncopyCodeBlock(anHtmlFile);\n```\nOR\n```javascript\ncopyCodeBlock('\u003cdiv\u003eThundercats\u003c/div\u003e')\n```\nOR\n```javascript\n`${copyCodeBlock('\u003cdiv\u003eThundercats\u003c/div\u003e')}`\n```\n\n### If you don't like the styles, you can override them.\n```javascript\nimport anHtmlFile from './anHtmlFile.html';\ncopyCodeBlock(anHtmlFile, options);\n```\nThe options argument is an object. There are five customizable colors:\n- `textColor`\n- `background`\n- `borderColor`\n- `buttonTextColor`\n- `buttonBackground`\n\nThese 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.\n\nYou can find all the defaults [here](./src/utils.js#L58).\n\nYou may also override the CSS classes by passing a template literal into the `cssOverrides` option. Such as:\n```\n{\n  cssOverrides: `\n    .container {\n      display: block;\n      padding: 1rem;\n      margin-bottom: 2rem;\n    }\n\n    .container code {\n      padding: 1.5rem;\n    }\n  `\n}\n```\nExamples for CSS overrides are included in the stories for each of the languages.\n\n### Syntax highlighting\nIf you want syntax highlighting, you'll need to `npm install highlight.js`.\nThen you need to initialize your language:\n```javascript\nimport hljs from 'highlight.js/lib/highlight';\nhljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));\n```\nOr, if you want all of the languages:\n```javascript\nimport 'highlight.js';\n```\nThen, when you're calling `copyCodeBlock`, tell it what language to use:\n```javascript\nimport anHtmlFile from './anHtmlFile.html';\ncopyCodeBlock(anHtmlFile, { lang: 'xml' });\n```\n\nNOTE: the 1st argument passed to `hljs.registerLanguage` is the value for lang in `copyCodeBlock`'s options object. The languages all have [aliases](https://github.com/highlightjs/highlight.js/blob/master/docs/css-classes-reference.rst#language-names-and-aliases). So if you wanted to use HTML, you could register it as `html`, a valid alias for `xml`...\n```javascript\nhljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));\n```\n...but you still have to require the `xml` language. Then use `html` as the `lang` value in `copyCodeBlock`'s options object...\n```javascript\ncopyCodeBlock(anHtmlFile, { lang: 'html' });\n```\n\nIf you supply `lang: 'auto'`, this will tell highlight.js to attempt to automatically choose a language from whichever ones are loaded.\n\n#### Syntax highlighting for specific code segments.\nFor an idea of how to do this look at [the custom html example](./examples/customHtml.js) or [the custom rust example](./examples/rust.stories.js#L23).\n\nNOTE: camelCase colors get converted to hyphen-case, such as `metaString` converts to\n`meta-string` in the rust example.\n\nFor a complete list of `hljs` classes, see [their CSS class reference](https://github.com/highlightjs/highlight.js/blob/master/docs/css-classes-reference.rst#stylable-classes).  To see which classes are used by a specific language, find the language [from the complete list](https://github.com/highlightjs/highlight.js/tree/master/src/languages) and look for properties called `className`.\n\n#### Built-in syntax highlighting\nAnother option for styling the highlighted code is to choose any of [hightlight.js's built-in styles](https://highlightjs.org/static/demo/) by importing it as so:\n```javascript\nimport 'highlight.js/styles/a11y-light.css';\n```\nNOTE: using `textColor` may override the built-in syntax highlighting.\n\n## Dev\n**Requirements:** `node` 6.0.0 or higher, `npm` 3.8.6 or higher\n- `npm start`, runs storybook\n\n## Tests\n- `npm start`\n- in a different terminal, `npm t` runs all the tests\n\n### To run 1 test file, prepend `-- -t tests/theTestFileName.js`\n```\nnpm t -- -t tests/SimplHTML.js\n```\n\n### To run 1 testcase, prepend `--testcase \"name of testcase\"`\n```\nnpm t -- -t tests/SimplHTML.js --testcase \"Simple HTML\"\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpickra%2Fcopy-code-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpickra%2Fcopy-code-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpickra%2Fcopy-code-block/lists"}