This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 10 July 2018

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 dễ sử dụng. Trong bài viết này tôi sẽ hướng dẫn bạn kết hợp nó với clipboardjs, tooltip để tạo nên khung chứa chia sẻ code cho blog

Xem demo
demo

Đồ nghề sử dụng trong bài
  • ClipboardJS v2.0.1
  • jQuery v3.3.1
  • Tooltip Bootstrap v3.3.7
  • FontAwesome v5.1.0
  • Highlight.js v9.12.0 (sử dụng theme tomorrow-night-bright)

Lần lượt tích hợp

- Dán trước thẻ </head>

<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'/>

- Viết CSS

.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}

- Chèn trước thẻ đóng </body>

<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>

- Mẫu code khi viết bài

<pre><code class="xxx">
<!-- Chèn code đã convert kí tự đặc biệt vào đây -->
</code></pre>

- Trong đó xxx là ngôn ngữ muốn hiển thị, lấy list tại đây. Không muốn làm đẹp một khung nào đó sử dụng

<pre><code class="nohighlight">
<!-- Chèn code đã convert kí tự đặc biệt vào đây -->
</code></pre>

Tùy chỉnh thêm css theo ý thích của bạn

KẾT LUẬN: kết luận nhiều với mấy cái khung này rồi thôi không kết luận nữa nhé :)

Để lại bình luận nếu gặp khó khăn và chúc bạn thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js