kmx.io/prism.js/plugins/copy-to-clipboard/index.html
Branch
-
Show log
Commit
-
Hash : de79636a
Author :
Date : 2021-05-01T14:57:39
Website: Moved remaining vendor files into `vendor` folder (#2829)
-
plugins/copy-to-clipboard/index.html
-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="assets/favicon.png" /> <title>Copy to Clipboard ▲ Prism plugins</title> <base href="../.." /> <link rel="stylesheet" href="assets/style.css" /> <link rel="stylesheet" href="themes/prism.css" data-noprefix /> <link rel="stylesheet" href="plugins/toolbar/prism-toolbar.css" data-noprefix /> <script src="assets/vendor/prefixfree.min.js"></script> <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script> <script src="https://www.google-analytics.com/ga.js" async></script> </head> <body class="language-text"> <header data-plugin-header="copy-to-clipboard"></header> <section> <h1>How to use</h1> <p>The plugin depends on the Prism <a href="https://prismjs.com/plugins/toolbar/">Toolbar</a> plugin. In addition to including the plugin file with your PrismJS build, ensure it is loaded before the plugin.</p> </section> <section> <h1>Settings</h1> <p>By default, the plugin shows messages in English and sets a 5-second timeout after a click. You can use the following HTML5 data attributes to override the default settings:</p> <ul> <li><code class="token attr-name">data-prismjs-copy</code> — default message displayed by Copy to Clipboard;</li> <li><code class="token attr-name">data-prismjs-copy-error</code> — a message displayed after failing copying, prompting the user to press <code>Ctrl+C</code>;</li> <li><code class="token attr-name">data-prismjs-copy-success</code> — a message displayed after a successful copying;</li> <li><code class="token attr-name">data-prismjs-copy-timeout</code> — a timeout (in milliseconds) after copying. Once the timeout passed, the success or error message will revert back to the default message. The value should be a non-negative integer.</li> </ul> <p>The plugin traverses up the DOM tree to find each of these attributes. The search starts at every <code class="token tag">pre code</code> element and stops at the closest ancestor element that has a desired attribute or at the worst case, at the <code class="token tag">html</code> element.</p> <p><strong>Warning!</strong> Although possible, you definitely shouldn't add these attributes to the <code class="token tag">html</code> element, because a human-readable text should be placed <em>after</em> the character encoding declaration (<code><meta charset="..."></code>), and the latter <a href="https://html.spec.whatwg.org/multipage/semantics.html#charset">must be</a> serialized completely within the first 512 (in older browsers) or 1024 bytes of the document. Consider using the <code class="token tag">body</code> element or one of its descendants.</p> </section> <section> <h1>Styling</h1> <p>This plugin supports customizing the style of the copy button. To understand how this is done, let's look at the HTML structure of the copy button:</p> <pre><code class="language-markup"><button class="copy-to-clipboard-button" type="button" data-copy-state="copy"> <span>Copy</span> </button></code></pre> <p>The <code>copy-to-clipboard-button</code> class can be used to select the button. The <code>data-copy-state</code> attribute indicates the current state of the plugin with the 3 possible states being:</p> <ul> <li><code>data-copy-state="copy"</code> — default state;</li> <li><code>data-copy-state="copy-error"</code> — the state after failing copying;</li> <li><code>data-copy-state="copy-success"</code> — the state after successful copying;</li> </ul> <p>These 3 states should be conveyed to the user either by different styling or displaying the button text.</p> </section> <section> <h1>Examples</h1> <h2>Sharing</h2> <p>The following code blocks show modified messages and both use a half-second timeout. The other settings are set to default.</p> <p>Source code:</p> <pre><code class="language-html"><body data-prismjs-copy-timeout="500"> <pre><code class="language-js" data-prismjs-copy="Copy the JavaScript snippet!">console.log('Hello, world!');</code></pre> <pre><code class="language-c" data-prismjs-copy="Copy the C snippet!">int main() { return 0; }</code></pre> </body></code></pre> <p>Output:</p> <div data-prismjs-copy-timeout="500"> <pre><code class="language-js" data-prismjs-copy="Copy the JavaScript snippet!">console.log('Hello, world!');</code></pre> <pre><code class="language-c" data-prismjs-copy="Copy the C snippet!">int main() { return 0; }</code></pre> </div> <h2>Inheritance</h2> <p>The plugin always use the closest ancestor element that has a desired attribute, so it's possible to override any setting on any descendant. In the following example, the <code class="token attr-value">baz</code> message is used. The other settings are set to default.</p> <p>Source code:</p> <pre><code class="language-html"><body data-prismjs-copy="foo"> <main data-prismjs-copy="bar"> <pre><code class="language-c" data-prismjs-copy="baz">int main() { return 0; }</code></pre> </main> </body></code></pre> <p>Output:</p> <div data-prismjs-copy="foo"> <div data-prismjs-copy="bar"> <pre><code class="language-c" data-prismjs-copy="baz">int main() { return 0; }</code></pre> </div> </div> <h2>i18n</h2> <p>You can use the data attributes for internationalization.</p> <p>The following code blocks use shared messages in Russian and the default 5-second timeout.</p> <p>Source code:</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="ru"> <!-- The head is omitted. --> <body data-prismjs-copy="Скопировать" data-prismjs-copy-error="Нажмите Ctrl+C, чтобы скопировать" data-prismjs-copy-success="Скопировано!" > <pre><code class="language-c">int main() { return 0; }</code></pre> <pre><code class="language-js">console.log('Hello, world!');</code></pre> </body> </html></code></pre> <p>Output:</p> <div data-prismjs-copy="Скопировать" data-prismjs-copy-error="Нажмите Ctrl+C, чтобы скопировать" data-prismjs-copy-success="Скопировано!" > <pre><code class="language-c">int main() { return 0; }</code></pre> <pre><code class="language-js">console.log('Hello, world!');</code></pre> </div> <p>The next HTML document is in English, but some code blocks show messages in Russian and simplified Mainland Chinese. The other settings are set to default.</p> <p>Source code:</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"><!-- The head is omitted. --> <body> <pre><code class="language-js">console.log('Hello, world!');</code></pre> <pre lang="ru" data-prismjs-copy="Скопировать" data-prismjs-copy-error="Нажмите Ctrl+C, чтобы скопировать" data-prismjs-copy-success="Скопировано!" ><code class="language-js">console.log('Привет, мир!');</code></pre> <pre lang="zh-Hans-CN" data-prismjs-copy="复制文本" data-prismjs-copy-error="按Ctrl+C复制" data-prismjs-copy-success="文本已复制！" ><code class="language-js">console.log('你好，世界！');</code></pre> </body> </html></code></pre> <p>Output:</p> <div> <pre><code class="language-js">console.log('Hello, world!');</code></pre> <pre lang="ru" data-prismjs-copy="Скопировать" data-prismjs-copy-error="Нажмите Ctrl+C, чтобы скопировать" data-prismjs-copy-success="Скопировано!" ><code class="language-js">console.log('Привет, мир!');</code></pre> <pre lang="zh-Hans-CN" data-prismjs-copy="复制文本" data-prismjs-copy-error="按Ctrl+C复制" data-prismjs-copy-success="文本已复制！" ><code class="language-js">console.log('你好，世界！');</code></pre> </div> </section> <footer data-src="assets/templates/footer.html" data-type="text/html"></footer> <script src="prism.js"></script> <script src="plugins/autoloader/prism-autoloader.js" data-autoloader-path="components/"></script> <script src="plugins/toolbar/prism-toolbar.js"></script> <script src="plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script> <script src="assets/vendor/utopia.js"></script> <script src="components.js"></script> <script src="assets/code.js"></script> </body> </html>