Copy to clipboard pre tag

by kompiajaib

HTML

<pre><code>&lt;script src="dist/clipboard.min.js"&gt;&lt;/script&gt;</code></pre>
<br />
<pre><code>
&lt;div id="result-desc"&gt;&lt;/div&gt;<br />
&lt;ul id="feed-container"&gt;&lt;/ul&gt;<br />
&lt;div id="feed-nav"&gt;<br />
&lt;/div&gt;<br />
<br />
&lt;script type='text/javaScript'&gt;<br />
var label="<mark>Blogger</mark>";<br />
&lt;/script&gt;</code></pre>
<br />
<pre><code>
pre {<br />
&nbsp; position: relative;<br />
&nbsp; overflow: visible;<br />
&nbsp; display: block;<br />
&nbsp; padding: 0;<br />
&nbsp; white-space: initial;<br />
&nbsp; word-break: normal;<br />
&nbsp; word-wrap: normal;<br />
&nbsp; background: #eee;<br />
&nbsp; line-height: 20px!important;<br />
&nbsp; border: 0;<br />
&nbsp; border-radius: 0<br />
}<br />
<br />
pre code {<br />
&nbsp; white-space:initial;<span class="Apple-tab-span" style="white-space: pre;">	</span><br />
}<br />
mark,<br />
mark span {<br />
&nbsp; background-color: red!important;<br />
&nbsp; color: #fff!important<br />
}
</code></pre>

<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://firebasestorage.googleapis.com/v0/b/kompijs.appspot.com/o/JS%2Fhighlight2_copyclipboard.js?alt=media&token=96ca4e65-d9bc-46cd-a8bc-a0418381ac28",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

CSS

pre {
  position: relative;
  overflow: visible;
  display: block;
  padding: 0;
  white-space: initial;
  word-break: normal;
  word-wrap: normal;
  background: #eee;
  line-height: 20px!important;
  border: 0;
  border-radius: 0
}

pre code {
  white-space:initial;	
}
mark,
mark span {
  background-color: red!important;
  color: #fff!important
}

pre .btn {
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  padding: 2px 6px;
  position: absolute;
  right: 4px;
  top: 4px;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
  color: #333;
  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;
}

code {
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  white-space: initial;
  word-spacing: normal;
  word-break: normal;
  hyphens: none;
  color: #BC587E;
  font-size: 80%;
  padding: 0;
  vertical-align: 1px;
  font-style: normal!important
}

img.clippy {
  position: relative;
  vertical-align: middle;
  padding: 0;
  background: none;
  border: none;
  -moz-box-shadow: 0;
  -webkit-box-shadow: 0;
  box-shadow: 0;
}

pre:hover .btn {
  opacity: 1;
}

.tooltipped {
  position: relative
}

.tooltipped:after {
  position: absolute;
  z-index: 1000000;
  display: none;
  padding: 5px 8px;
  font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  color: #333;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: break-word;
  white-space: pre;
 ...