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
Đồ 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 !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên