Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

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

    Quản trị viên

    baivong

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     09.08.16 14:10 

    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.

    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


    [TUTs] Zzhljs - Làm đẹp khung code với highlightjs và clipboardjs 2xpXfbr
    Ả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
    You cannot reply to topics in this forum