jperasmus / docsify-copy-code Goto Github PK

I'm using your CopyCode plugin for Docsify. It works great. But I see some enhanced versions of it on GitHub and your cdnjs library webpage. The image below shows three versions of it.

1. The one available here only has a Text copy button.
2. The one on GitHub when I preview a markdown page has Copy icon as the button. It also displays a Play / Pause icon when it detects a .gif file
3. The one on your cdnjs site that has a Copy URL icon, a "Copy Script Tag icon and a 1Copy SRI Hash icon.

Do you know where versions of these enhanced CopyCode plugin are. Or perhaps you could point me to some code that I might use to create such a plugin myself. One that works with any markdown add-in script would be great, as I suspect the GitHub site is using.

I am trying to install the docsify copy code plugin. However it doesn't work nothing change in my HTML yet I did all the required steps to make this works.

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<script>
window.$docsify = {

      copyCode: {
        buttonText : 'Copy to clipboard',
        errorText  : 'Error',
        successText: 'Copied'
      },
      plugins: [
        window.DocsifyCopyCodePlugin.init()
      ]
    }
<srcipt>

In my console log I have this error

(DevTools failed to load SourceMap: Could not load content for https://unpkg.com/docsify-copy-code.min.js.map: 
 HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

Any suggestion ?

We have a problem here when you said #15:
<script src="https://unpkg.com/docsify-copy-code@2"></script>

It should be:
<script src="https://unpkg.com/docsify-copy-code@2/"></script>

I found the solution with this great comment: #7 (comment)

Same mistake here on #26, you put:
<script src="https://unpkg.com/docsify-copy-code"></script>

And should be:
<script src="https://unpkg.com/docsify-copy-code/"></script>

Did your pages like this ?

window.$docsify = {
…
      copyCode: {
        buttonText: '复制',
        errorText: '复制失败',
        successText: '已复制'
      },
…
    }

Currently, the copy button only appears in the top right corner of the code block when hovering over it with the mouse. How can we make the copy button always visible in the top right corner of the code block?

Two issues:

1. querySelectorAll returns a NodeList, and not all browsers provide a forEach method on NodeLists.

2. Arrow functions are not support in IE (or older evergreen browsers).

Fixed by #3

Steps to reproduce
1.Navigate to this link First Level Child (zorana-jankovic.github.io)
2.Turn on screen reader.
3.Tab navigate to the "Copy to Clipboard" button and invoke it.
4.Observe that screenreader is announcing the success message copied/not.

What is current behaviour
Upon invoking "Copy to Clipboard" button, the Narrator is not announcing the success message "Copied".

What is the expected behaviour
Upon invoking "Copy to Clipboard" button, the Narrator should announce the success message "Copied".
Note: Issue occurs in NVDA, JAWS also

Other relevant information
Your OS: OS build (22621.1265)
Browser version: Version 110.0.1587.50 (Official build) (64-bit)
NVDA version: 2022.3.2
JAWS version: 2023.2212.23 ILM

Microsoft tracking Id: ACCESSIBILITY 204134

Specifically:

• Minify JS
• Bundle JS and CSS (remove external stylesheet requirement and save a request)
• Remove need to manually initialize plugin (do this automatically in the plugin)
• Add a changelog.md file to the repo so users can track changes between versions

Fixed by #5

It would be great to know this plugin supports i18n. Any idea?

Hi!

Do you plan to release v3.0.0 officially (as in tag it)?
The current latest (tagged) release is 2.1.1, but there have been quite a few commits since 2020-09-21 (26, not counting dependabot commits).
It'd be nice if you consider it stable enough. The various CDN distribution services (e.g. jsdelivr.net, etc.) could pick up on it and a lot more people would start to test and use it.

The following warning appears in the console after the copy code button is clicked:

[Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See https://www.chromestatus.com/features/6680566019653632 for more details.

Fixed by #3

Hi, when I plug in the vue.js, your plugin stops working, what to do?

unpkg.com often goes wrong, such as 429 error code.
Are there any other cdn sources?
Or how to build locally?

Test Environment:
OS: Windows11
OS Version: 23H2 (Build 25905.1000)
Browser: Edge Dev (Version 117.0.2007.0 (Official build) dev (64-bit))
URL: PWABuilder - Packaging for the Google Play Store
Screen reader: Narrator

Steps to reproduce

1. Open the URL: PWABuilder - Packaging for the Google Play Store in browser.
2. Navigate to ‘Copy to clipboard’ button through tab key.
3. Observe the issue.

Current behaviour
Keyboard focus boundary is not visible on the ‘Copy to clipboard’ button present at the page.

Expected behaviour
Proper keyboard focus boundary should be visible on the ‘Copy to clipboard’ button.

Attachments:

Refused to apply style from 'https://unpkg.com/[email protected]/styles.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

(index):1 Refused to execute script from 'https://unpkg.com/[email protected]/index.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
(index):80 Uncaught TypeError: Cannot read property 'init' of undefined
at (index):80

The copyed content ends with a newline, which is convenient sometimes, would you like to fix it ?