docsify-plugin-copy-as-markdown-button
v1.0.1
Published
Docsify plugin that adds a copy-as-Markdown button to every heading section
Maintainers
tucho235Readme
docsify-plugin-copy-as-markdown-button
A Docsify plugin that adds a Copy as Markdown button to every heading. Clicking it copies that section's raw Markdown to the clipboard — ideal for pasting into AI chats, where Markdown is understood far better than plain text or HTML.
Features
- Appears on hover next to every
h1–h6heading - Copies the heading and all its content as raw Markdown
- Nested sections are included (content stops at the next heading of equal or higher level)
- Headings inside fenced code blocks are correctly ignored
- Light/dark mode aware via
light-dark() - Visual feedback: checkmark on success, × on failure
- Styles injected automatically — no separate CSS file needed
- No dependencies, single file
Installation
Via CDN
Add the script after the Docsify script tag in your index.html:
<!-- minified (recommended) -->
<script src="//cdn.jsdelivr.net/gh/tucho235/[email protected]/docsify-plugin-copy-as-markdown.min.js"></script>
<!-- unminified -->
<script src="//cdn.jsdelivr.net/gh/tucho235/[email protected]/docsify-plugin-copy-as-markdown.js"></script>Via npm
npm install docsify-plugin-copy-as-markdown-buttonThen reference the file from node_modules:
<script src="node_modules/docsify-plugin-copy-as-markdown-button/docsify-plugin-copy-as-markdown.min.js"></script>Manual
Download docsify-plugin-copy-as-markdown.js and place it in your project:
<script src="docsify-plugin-copy-as-markdown.js"></script>No configuration needed. The plugin registers itself automatically.
Usage
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Docs</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = { name: 'My Docs' };
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- Copy as Markdown plugin -->
<script src="//cdn.jsdelivr.net/gh/tucho235/[email protected]/docsify-plugin-copy-as-markdown.js"></script>
</body>
</html>How sections work
Each button copies the heading it belongs to plus everything that follows it, up to (but not including) the next heading at the same level or higher. For example:
## Installation ← button copies from here…
Some text.
### Step 1 ← …down to here (level 2 ends when next level 2 starts)
### Step 2
## Usage ← next level-2 heading, not included in "Installation"Clicking the button on Installation copies:
## Installation
Some text.
### Step 1
### Step 2Configuration
Pass options via window.$docsify.copyMarkdown before loading the plugin:
window.$docsify = {
copyMarkdown: {
buttonLabel: 'Copy section as Markdown', // button tooltip and aria-label
flashDuration: 1500, // feedback duration in ms
}
}| Option | Type | Default | Description |
|---|---|---|---|
| buttonLabel | string | 'Copy section as Markdown' | Button tooltip and aria-label |
| flashDuration | number | 1500 | How long (ms) the success/error icon stays visible |
Customization
The plugin injects its own styles, which you can override in your site's CSS. All relevant selectors:
/* Button base */
.copy-md-btn { }
/* Hover state on the button itself */
.copy-md-btn:hover { }
/* Success feedback (shown for 2 s after a successful copy) */
.copy-md-btn.copy-md-ok { }
/* Error feedback */
.copy-md-btn.copy-md-error { }Browser support
Uses navigator.clipboard.writeText with a document.execCommand('copy') fallback for older browsers and non-HTTPS environments.
License
MIT