ClipboardJS with Tooltip And Highlight JS

Highlight.js là một mã nguồn mở dùng để làm đẹp khung chứa code với 179 ngôn ngữ và 79 style được hỗ trợ, cách tích hợp đơn giản và dễ sử dụng.

▶ Preview

Hướng dẫn

Bạn Đăng Nhập Trang Quản trị Blogger » Chủ đề » Tùy chỉnh » Chỉnh sửa HTML tìm đến thẻ đóng </head> và dán đoạn code sau đây vào trước nó.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/> 
<link href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' rel='stylesheet' type='text/css' />
<!-- Choose your favorite theme here: https://highlightjs.org/static/demo/ -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night-bright.min.css' rel='stylesheet' type='text/css'/>

Tiếp theo, bạn tìm đến thẻ đóng ]]></b:skin> và dán đoạn CSS sau đây vào trước nó.

.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}
.tooltip.in{opacity:.9;filter:alpha(opacity=90)}
.tooltip.top{padding:5px 0;margin-top:-3px}
.tooltip.right{padding:0 5px;margin-left:3px}
.tooltip.bottom{padding:5px 0;margin-top:3px}
.tooltip.left{padding:0 5px;margin-left:-3px}
.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-right .tooltip-arrow{right:5px;bottom:0;border-top-color:#000;border-width:5px 5px 0}
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-bottom-color:#000;border-width:0 5px 5px}

Bạn tùy chỉnh CSS theo ý bạn.

Tiếp tục, bạn tìm đến thẻ đóng </body> và dán đoạn JS sau đây vào trước nó.

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/components/bootstrap/3/js/tooltip.js' type='text/javascript'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    $("pre code").before("<div class='codeHeader'><a class='copy-text' data-clipboard-target='pre code' data-clipboard-action='copy'></a></div>");
    $('.copy-text').tooltip({
        trigger: 'click'
    })
    $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});
var clipboard = new ClipboardJS(".copy-text", {
    target: function(trigger) {
        return trigger.parentNode.nextElementSibling
    }
});

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

function hideTooltip(btn) {
    setTimeout(function() {
        $(btn).tooltip('hide');
    }, 500);
}
clipboard.on('success', function(e) {
    e.clearSelection(); // if you want to clear the Selection
    var btn = $(e.trigger);
    setTooltip(btn, 'Copied');
    hideTooltip(btn);
});
clipboard.on('error', function(e) {
    var btn = $(e.trigger);
    setTooltip('Failed');
    hideTooltip(btn);
});
//]]></script>

Sau đó nhấn 💾 để Lưu lại.

Áp dụng trong bài viết

Để sử dụng trong bài viết bạn chuyển sang Chế độ HTML và sử dụng đoạn code sau :

<pre><code class="xxx">
chèn_code_tại_đây
</code></pre>

hoặc

<pre><code class="nohighlight">
chèn_code_tại_đây
</code></pre>