[](https://github.com/LightAPIs/joplin-copy-code-blocks/releases/latest) [ 
This is a plugin for Joplin. Add a copy button to the code blocks.
!copy
1. Open Joplin, go to Tools > Options > Plugins.
2. Search for Copy Code Blocks.
3. Install this plugin.
4. Finally, restart the application.
1. Go to the Releases to download the plugin package zip file and unzip it.
2. Open Joplin, go to Tools > Options > Plugins.
3. Click Manage your plugins > Install from file, select the previously unzipped jpl file.
4. Finally, restart the application.
You can customize the style of the button by adding content in userstyle.css. The plugin provides the following CSS custom variables:
- --copy-code-blocks-color: Button color. The default value is #133975.
- --copy-code-blocks-hover-color: Button hover color. The default value is #2765ca.
- --copy-code-blocks-copied-color: Button copied color. The default value is #6aba7b.
- --copy-code-blocks-copied-hover-color: Button copied hover color. The default value is #a6da4d.
- --copy-code-blocks-top-spacing: Button top spacing. The default value is 0px.
- --copy-code-blocks-right-spacing: Button right spacing. The default value is 0px.
For example:
``css`
body {
--copy-code-blocks-color: #252d3a;
--copy-code-blocks-copied-color: #189463;
--copy-code-blocks-top-spacing: 4px;
--copy-code-blocks-right-spacing: 4px;
}
The plugin is built using Webpack, which creates the compiled code in /dist. A JPL archive will also be created at the root, which can use to distribute the plugin.
To build the plugin, simply run npm run dist`.
MIT license