ClipboardJS with Tooltip and Highlight Code

<center><h2>HTML Markup</h2></center>
    <pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;title&gt;Title&lt;/title&gt;

&lt;style&gt;body {width: 500px;}&lt;/style&gt;

&lt;script type=&quot;application/javascript&quot;&gt;
  function $init() {return true;}
&lt;/script&gt;

&lt;body&gt;
  &lt;p checked class=&quot;title&quot; id=&#39;title&#39;&gt;Title&lt;/p&gt;
  &lt;!-- here goes the rest of the page --&gt;
&lt;/body&gt;</code></pre>
<br />

<center><h2>Javascript Markup</h2></center>
    <pre><code class="javascript">function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
}

export  $initHighlight;</code></pre>

function setTooltip(btn, message) {
    $(btn).tooltip('hide').attr('data-original-title', message).tooltip('show');
}

​x
 
<center><h2>HTML Markup</h2></center>
    <pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;title&gt;Title&lt;/title&gt;
​
&lt;style&gt;body {width: 500px;}&lt;/style&gt;
​
&lt;script type=&quot;application/javascript&quot;&gt;
  function $init() {return true;}
&lt;/script&gt;
​
&lt;body&gt;
  &lt;p checked class=&quot;title&quot; id=&#39;title&#39;&gt;Title&lt;/p&gt;
  &lt;!-- here goes the rest of the page --&gt;
&lt;/body&gt;</code></pre>
<br />
​
<center><h2>Javascript Markup</h2></center>
    <pre><code class="javascript">function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
}
​
export  $initHighlight;</code></pre>
​
<link href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' rel='stylesheet' type='text/css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/components/bootstrap@3/js/tooltip.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night-bright.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
        <style>.codeHeader{position:absolute;text-align:right;top:-5px;right:0}
  .copy-text{font-size:14px;cursor:pointer;color:#fff;padding:8px 10px;background:#000;border:1px solid #666;border-radius:100%}
  .copy-text:before{font-family:"font awesome 5 free";content:"\f24d";display:inline-block;font-size:13px}
  .copy-text:hover{color:#fff;background:#333}
  pre{padding-right:15px;position:relative}
  pre code{display:block;max-height:400px;font-size:14px;color:black;text-align:left;overflow:auto;border:0;margin:auto;padding:16px;line-height:21px}
  .tooltip{position:absolute;z-index:1030;display:block;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}