.codeHeader { 
 background-color: #f5f5f5; 
 border: 1px solid #e0e0e0; 
 border-bottom: 0; 
 text-align: right; 
 padding: 2px; 
 } 
 
 .copy-text { 
 font-size: 14px; 
 cursor: pointer; 
 color: #707070; 
 padding: 7px 10px; 
 border-left: 1px solid #e0e0e0; 
 } 

 .copy-text:hover {color:#707070;} 
 pre.code { 
 display: block; 
 background: #f9f9f9; 
 max-height: 400px; 
 font-size: 14px; 
 color: black; 
 text-align: left; 
 overflow: auto; 
 border: 1px solid #d3d6db; 
 margin: auto; 
 padding: 16px; 
 line-height: 21px; 
 white-space: nowrap; 
 } 
 
 

 
 <script src="http://ibox.clan.su/track-bs/js/khung-code-2.1.1jquery.min.js"></script> 
 <script src="http://ibox.clan.su/track-bs/js/khung-code-clipboard.js"></script> 
 <script> 
 $(function(){ 
 new Clipboard('.copy-text'); 
 }); 

 </script> 
 

 
 <div class="codeHeader"> 
 <a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);"><i class="fa fa-files-o"></i> Copy</a> 
 <pre class="code" id="p1"> 
 Nội dụng nằm trong khung 
 </div> </pre> 
 

 
 <pre style="background-attachment: initial; background-clip: initial; background-color: #e9e9e9; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 3px dotted rgb(208, 208, 208); font-stretch: inherit; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: justify; vertical-align: baseline; width: auto !important; word-wrap: normal;"> 
 Đây chứa nội dung code 
 Ví dụ: 
 &lt;source src="mov_bbb.mp4" type="video/mp4"&gt; 
 &lt;source src="mov_bbb.ogg" type="video/ogg"&gt; 
 Lưu ý: &lt; và &gt; là thay cho dấu < > 
 </pre>