Tạo khung viết Code Coppy Clipbroad
HTML/CSS/JS Sao chép
/***************Code HTML***************/
<div class="codeHeader">
<a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);"><i class="fa fa-files-o"></i> Sao chép</a>
</div>
<pre class="code" id="p1">
<pre>
<pre>
Nội dung 1
<body>
Nội dung trong body
</body>
</pre>
/***************Code CSS***************/
<style type="text/css">
.codeHeader {
background-color: #ddd;
border: 1px solid #e0e0e0;
border-bottom: 0;
text-align: right;
padding: 2px;
}
.copy-text {
font-size: 16px;
cursor: pointer;
color: red;
padding: 7px 10px;
border-left: 1px solid #e0e0e0;
text-decoration: none;
font-weight: bold;
}
.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: 3px solid #d3d6db;
margin: auto;
padding: 16px;
line-height: 21px;
white-space: nowrap;
}
</style>
/***************Code JS***************/
<script type="text/javascript">
$(function(){
new Clipboard('.copy-text');
});
</script>
Không có nhận xét nào