diff options
| -rw-r--r-- | README.md | 31 | ||||
| -rwxr-xr-x | scripts/setup.sh | 26 |
2 files changed, 55 insertions, 2 deletions
@@ -92,6 +92,34 @@ curl -L "https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min. Then add each `<script>` tag for these files to `index.html` (see Step 3). +### Optional: Copy-to-Clipboard Button + +To add a **copy** button to every fenced code block, download the +[docsify-copy-code](https://github.com/jperasmus/docsify-copy-code) plugin. As with +the assets above, it is fetched once and served locally thereafter: + +```bash +# Copy-to-clipboard plugin +curl -L "https://cdn.jsdelivr.net/npm/docsify-copy-code@3/dist/docsify-copy-code.min.js" \ + -o assets/js/docsify-copy-code.min.js +``` + +The plugin injects its own CSS via JavaScript, so there is **no separate CSS file** +to download. Just add its `<script>` tag to `index.html` **after** `docsify.min.js` +(see Step 3). Copying uses `document.execCommand('copy')`, so it works over plain +`http://` as well as `https://`. + +It works with no configuration. To customise the button labels, add a `copyCode` +block to the `window.$docsify` object in `index.html`: + +```js +copyCode: { + buttonText: 'Copy to clipboard', + errorText: 'Error', + successText: 'Copied' +} +``` + --- ## Step 3: Create `index.html` @@ -121,6 +149,9 @@ Create `index.html`: <script src="assets/js/docsify.min.js"></script> <script src="assets/js/search.min.js"></script> + <!-- Remove the line below if you did not download the copy-code plugin --> + <script src="assets/js/docsify-copy-code.min.js"></script> + <!-- Remove the lines below if you did not download Prism --> <script src="assets/js/prism-core.min.js"></script> <script src="assets/js/prism-bash.min.js"></script> diff --git a/scripts/setup.sh b/scripts/setup.sh index d3d188e..ab24775 100755 --- a/scripts/setup.sh +++ b/scripts/setup.sh @@ -3,10 +3,11 @@ # # Run this script from your Apache document root: # cd /path/to/docroot -# bash setup-docsify.sh [--with-prism] +# bash setup-docsify.sh [--with-prism] [--with-copy-code] # # Options: -# --with-prism Also download Prism and enable syntax highlighting in index.html +# --with-prism Also download Prism and enable syntax highlighting in index.html +# --with-copy-code Also download the docsify-copy-code plugin (copy button on code blocks) set -euo pipefail @@ -14,11 +15,13 @@ set -euo pipefail # Use "4" for the latest 4.x release, or pin to a specific version e.g. "4.13.1" DOCSIFY_VERSION="4" PRISM=false +COPY_CODE=false # ── Argument parsing ──────────────────────────────────────────────────────────── for arg in "$@"; do case "$arg" in --with-prism) PRISM=true ;; + --with-copy-code) COPY_CODE=true ;; *) echo "Unknown option: $arg" >&2; exit 1 ;; esac done @@ -81,6 +84,12 @@ if [[ "$PRISM" == true ]]; then fetch "${CDN}/prismjs@1/components/prism-javascript.min.js" assets/js/prism-javascript.min.js fi +if [[ "$COPY_CODE" == true ]]; then + echo "" + echo " Downloading copy-to-clipboard plugin..." + fetch "${CDN}/docsify-copy-code@3/dist/docsify-copy-code.min.js" assets/js/docsify-copy-code.min.js +fi + # ── Step 3: index.html ────────────────────────────────────────────────────────── step "Step 3 — Creating index.html" @@ -112,6 +121,14 @@ step "Step 3 — Creating index.html" <script src="assets/js/search.min.js"></script> HTML_HEAD + if [[ "$COPY_CODE" == true ]]; then + cat << 'HTML_COPYCODE' + + <!-- Copy-to-clipboard button for code blocks --> + <script src="assets/js/docsify-copy-code.min.js"></script> +HTML_COPYCODE + fi + if [[ "$PRISM" == true ]]; then cat << 'HTML_PRISM' @@ -191,3 +208,8 @@ if [[ "$PRISM" == true ]]; then echo -e "To add more languages, download additional prism-*.min.js files" echo -e "into assets/js/ and add their <script> tags to index.html." fi + +if [[ "$COPY_CODE" == true ]]; then + echo "" + echo -e "Copy-to-clipboard buttons are enabled on all code blocks." +fi |