Highlight js With Clipboard Button

by Agiel Triono

HTML

<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>
<div id="container">
<pre><code>{border: 'solid 1px #f1f1f1',background: '#fff'display: 'inline-block',height: '1.5625rem'padding: '0',line-height: '1.375rem',position: 'absolute',margin: '-6px 9px',top: 'auto',right: '2px',text-align: 'center',text-transform: 'uppercase',font-size: '.75em',color: '#777',border-radius: '3px',z-index: '30',opacity: '.8',transition: 'all .5s ease-in'}
    i = { backgroundColor : 'blue', color : '#fff' },</code></pre>
<br/>
<pre><code>$(document).ready(function() {
var e = $(&quot;pre code&quot;),
    t = $(e)[0].className.replace(&quot;hljs &quot;, &quot;&quot;),
    labinner = &quot;&lt;span class=&#039;windowLabel&#039;&gt;&quot;+t+&quot;&lt;/span&gt;&quot;,
  i = { border: &#039;solid 1px #f1f1f1&#039;,background: &#039;#fff&#039;,display: &#039;inline-block&#039;,height: &#039;auto&#039;,padding: &#039;0&#039;, lineHeight: &#039;1.375rem&#039;,position: &#039;absolute&#039;,margin: &#039;-6px 9px&#039;,top: &#039;auto&#039;,right: &#039;2px&#039;,textAlign: &#039;center&#039;,textTransform: &#039;uppercase&#039;,fontSize: &#039;.75em&#039;,color: &#039;#777&#039;,borderRadius: &#039;3px&#039;,zIndex: &#039;30&#039;, opacity: &#039;.8&#039;,transition: &#039;all .5s ease-in&#039;};
    e.append(labinner)
  $(&quot;span.windowLabel&quot;).css(i);
});</code></pre>
</div>

CSS

/* highlight js */
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#ddd}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
/* Clipboard Button */
.copycode{transition:all 200ms ease-in}
.copycode{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}
.copycode{position:absolute;display:inline-block;padding:6px 12px;font-size:13px;font-weight:bold;line-height:20px;color:#333;opacity:0;right:8px;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #d5d5d5;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}
.copycode:hover{background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)}
/* use opacity:1; for more visible */
pre:hover .copycode{opacity:1}

JavaScript

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
// TO DO
$(document).ready(function() {
var e = $("pre code"),
	  l = "<button class='copycode'>Copy</button>";
    e.before(l);
});
(function($){
$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("Copy");
    }
}
$.fn.removeRange = function(){
 if (window.getSelection) {
    if (window.getSelection().empty) {
            window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {
            window.getSelection().removeAllRanges();
     }
    } else if (document.selection) {
           document.selection.empty();
  }
 }
})(jQuery);
$(document).ready(function() {
  $(".copycode").click(function() {
    var e = $(this).parent().find('code'),
        l = $(this),
        c ="Copied",
        d = l.text();
     e.selectText();
     l.html(c);
   setTimeout(function(){
     l.html(d);
   e.removeRange();
   },1000)
  });
});