Copy To Clipboard For Syntax Highlighter

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/prism.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js'></script>

<h1>Hover in box and click copy icon on the right</h1>
  <div class="code-box-copy">
        <button class="code-box-copy__btn" data-clipboard-target="#example-html" title="Copy"></button>
        <pre><code class="language-html" id="example-html">&lt;nav class=&quot;navbar navbar-toggleable-md navbar-light bg-faded&quot;&gt;
  &lt;button class=&quot;navbar-toggler navbar-toggler-right&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;

&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
    &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
      &lt;li class=&quot;nav-item active&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link disabled&quot; href=&quot;#&quot;&gt;Disabled&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;form class=&quot;form-inline my-2 my-lg-0&quot;&gt;
      &lt;input class=&quot;form-control mr-sm-2&quot; type=&quot;text&quot; placeholder=&quot;Search&quot;&gt;
      &lt;button class=&quot;btn btn-outline-success my-2 my-sm-0&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/nav&gt;
        </code></pre>
    </div>

​x
 
<!-- Get lastest Jquery : https://cdnjs.com/libraries/jquery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
​
<!-- Get lastest prism : https://cdnjs.com/libraries/prism -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/prism.min.js'></script>
​
<!-- Get lastest clipboard.js : https://cdnjs.com/libraries/clipboard.js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js'></script> 
​
<style>
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
code[class*=language-]::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#3399FF}
code[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-]::selection,pre[class*=language-]::selection{text-shadow:none;background:#3297FD}
@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}
pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}
:not(pre)>code[class*=language-],pre[class*=language-]{background:unset}
:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}
.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}
.token.punctuation{color:#999}
.namespace{opacity:.7}
.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}
.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}
.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}
.token.atrule,.token.attr-value,.token.keyword{color:#07a}
.token.function{color:#dd4a68}
.token.important,.token.regex,.token.variable{color:#e90}
.token.bold,.token.important{font-weight:700}
.token.italic{font-style:italic}
.token.entity{cursor:help}
.code-box-copy{position:relative;font-size:14px}