[TUTs] Zzhljs - Làm đẹp khung code với highlightjs và clipboardjs

  Bài viết hay nhất1
Trong forum về code như Devs forumvi thì vấn đề màu mè cho khung code luôn được đặt lên hàng đầu. :D

Trước đây, mình đã có hướng dẫn vài cách ứng dụng các plugin syntax highlighter cho forum, mỗi cái có ưu và nhược điểm riêng, tạm kể ra vài tội như:
- Google Code Prettify: Tự nhận diện ngôn ngữ nhưng không chính xác lắm, xử lý rất chậm khi gặp code dài, kích thước file js lớn.
- Prismjs: Lỗi ở một số mã Regexp phức tạp, không tự nhận diện ngôn ngữ.
- CodeMirror: Không tự nhận diện ngôn ngữ, kích thước file js khá lớn.

Hôm nay mình sẽ hướng dẫn cách dùng highlightjs, một plugin syntax highlighter khắc phục được các nhược điểm trên.


Demo



Ảnh minh họa highlight code với ngôn ngữ PHP


Tính năng


  1. Hỗ trợ 146 ngôn ngữ và 66 giao diện (Xem ví dụ).
  2. Tự động nhận diện ngôn ngữ.
  3. Kích thước file js nhỏ ~17Kb.
  4. Sao chép nhanh dùng Clipboard.


Hạn chế


  1. Không hỗ trợ phpBB2. Do cấu trúc phpBB2 khác biệt với 3 mã nguồn còn lại, và ít người dùng nên mình không làm.
  2. Làm nổi bật cú pháp không chi tiết bằng 3 plugin mình giới thiệu trước đây.
  3. Không có các tính năng phụ như: số dòng, tìm dòng, chọn giao diện, chọn toàn bộ (đã thay bằng nút copy). Mình thấy các tính năng này ít dùng, lại làm chậm xử lý nên bỏ bớt cho nó nuột.



Hướng dẫn


ACP >> Display >> QLTT >> overall_header

Tìm:
Code:
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

Và thêm vào bên dưới nó, code sau:
Code:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github-gist.min.css">
<style>
/* Zzhljs - http://devs.forumvi.com */
dl.codebox:not(.spoiler) dt {
    display: none;
}
dl.codebox:not(.spoiler) dd {
    border: 0 none;
    background: #f8f8f8;
    position: relative;
    max-height: 100%;
}
.clipboard {
    display: block;
    color: #333;
    position: absolute;
    right: 4px;
    top: 4px;
    background: url(http://i.imgur.com/o9NOYtH.png) no-repeat center center #eee;
    border: 1px solid #D5D5D5;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    transition: opacity 0.3s ease-in-out 0s;
    opacity: 0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-appearance:none;
    cursor: pointer;
}
.clipboard.check-circle {
    background-image: url(http://i.imgur.com/CBEkyLH.png);
}
.clipboard.exclamation-triangle {
    background-image: url(http://i.imgur.com/QQkE9Wj.png);
}
dl.codebox:not(.spoiler) dd:hover .clipboard {
    opacity: 1;
}
.clipboard:hover {
    background-color:#ddd;
    border-color:#ccc;
}
.hljs {
    background: #f8f8f8;
}
dl.codebox:not(.spoiler) code,
.codebox:not(.spoiler) dd.cont_code {
    max-height: 100%;
    margin: 0;
}
.codebox:not(.spoiler) {
    background-color: transparent;
    border: 0 none;
    margin: 0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
/* Zzhljs - http://devs.forumvi.com */
jQuery(function($){
    var $code = $("code");
    if ($code.length) {
        hljs.configure({
            useBR: true
        });
        $code.each(function (i, block) {
            hljs.highlightBlock(block);
        });

        function fallbackMessage(action) {
            var actionMsg = '';
            var actionKey = (action === 'cut' ? 'X' : 'C');

            if (/iPhone|iPad/i.test(navigator.userAgent)) {
                actionMsg = 'No support!';
            } else if (/Mac/i.test(navigator.userAgent)) {
                actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
            } else {
                actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
            }

            return actionMsg;
        }

        function afterClipboard(ele) {
            setTimeout(function(){
                ele.className = 'clipboard clipboard';
            }, 400);
        }

        var snippets = document.querySelectorAll('.codebox:not(.spoiler) > dd');

        [].forEach.call(snippets, function (snippet) {
            snippet.firstChild.insertAdjacentHTML('beforebegin', '<i class="clipboard clipboard" data-clipboard></i>');
        });

        var clipboardSnippets = new Clipboard('[data-clipboard]', {
            target: function (trigger) {
                return trigger.nextElementSibling;
            }
        });

        clipboardSnippets.on('success', function (e) {
            e.clearSelection();
            e.trigger.className = 'clipboard check-circle';
            afterClipboard(e.trigger);
        });

        clipboardSnippets.on('error', function (e) {
            e.trigger.className = 'clipboard exclamation-triangle';
            afterClipboard(e.trigger);
            alert(fallbackMessage(e.action));
        });
    }
});
</script>


Tài nguyên

Icon từ FlatIcon.
Javascript plugin HighlightJsClipboardJs.
Ứng dụng cho Forumotion viết bởi Zzbaivong.
Tags: #mod #template #tutorial #highlight #clipboard #hljs
  Bài viết hay nhất2
Vậy là anh đã bỏ khung code cũ?
  Bài viết hay nhất3
Cô lấy cái Plugin copy từ tôi mà cô không ghi một dòng cảm ơn tôi à? Cô đối xử với tôi như vậy sao :sosad:
  Bài viết hay nhất4
Poor @Kazuto ơ mà a baivong thế hơi khó xác định dòng ạ :))
  Bài viết hay nhất5

Kelvin_Kingleon wrote:Poor @Kazuto ơ mà a baivong thế hơi khó xác định dòng ạ :))

Đơn giản hóa đi, dòng làm vẹo gì. Đếm thủ công.
  Bài viết hay nhất6
hơi dài auto cuộn đi @Zzbaivong
  Bài viết hay nhất7

sonlapro wrote:hơi dài auto cuộn đi @Zzbaivong

Cái đấy tự thêm vài dòng CSS là được, không cần phải thêm, phức tạp, xấu hẳn khung code.
  Bài viết hay nhất8
cuối cùng cũng thấy bác vong trở lại
  Bài viết hay nhất9
cuối cùng cũng có dòng rồi :v khỏi tốn công đếm nữa :P
  Bài viết hay nhất10
Trong forum về code như Devs forumvi thì vấn đề màu mè cho khung code luôn được đặt lên hàng đầu.
oh màu mè :)))))
  Bài viết hay nhất11
 Thanks!
You cannot reply to topics in this forum