Đă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] zzCodeMirror - Lựa chọn hàng đầu cho khung code của bạn

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:20 

    CodeMirror là một Text editor, viết bằng Javascript hoạt động trên trình duyệt, được dùng trong dev tool của Chrome, Firefox và nhiều Text editor khác như Brackets,  Light Table, ... Trong forumotion, nó được dùng làm công cụ chỉnh sửa CSS, Templates, trang html.
    Ở bài này mình sẽ ứng dụng nó để làm nổi bật cú pháp trong code. Xét về dung lượng, nó có vẻ hơi khủng nếu đem so với 2 cách dùng plugin Google Code Prettify và Prismjs mà mình giới thiệu trước đây. Tuy nhiên, trái với vẻ bề ngoài nặng nề, nó có tốc độ xử lý rất nhanh và ổn định.


    Chức năng


    Ưu điểm


    • Chức năng di chuyển nhanh bằng cách nhập số dòng. Nhập 0 để chuyển đến dòng cuối.
    • Hỗ trợ chọn nhanh toàn bộ code.
    • Xử lý nhanh chóng, phân biệt rõ cú pháp trong code.
    • 30 giao diện thoải mái lựa chọn.
    • Hỗ trợ rất nhiều Add-on và API nếu bạn muốn tùy chỉnh thêm.

    Nhược điểm


    • Chỉ áp dụng cho 3 loại ngôn ngữ HTML-CSS-JS.
    • Một số mã regexp không được xác định đúng.

    Cập nhật: Sử dụng phiên bản mới nhất cho các addon (21/6/2015), và thay thế core của codemirror bằng addon stand-alone, giúp giảm dung lượng từ 192kb xuống còn 48kb.

    Demo


    Giao diện zzCodeMirror


    Hướng dẫn


    Tạo file javascript zzCodeMirror
    Title * : zzCodeMirror
    Placement : In all the pages
    Javascript Code * :
    Code:
    $(function() {
        window.codeTranslate = {
            gotoLineOffsetTop: 5
        };
        $("code").length && $.getScript("http://baivong.github.io/cdn/devsforumvi/js/35300.js");
    });
    Trong code trên, gotoLineOffsetTop là tham số khoảng cách của dòng code với mép trên trình duyệt. Nếu bạn sử dụng Toolbar của forumotion thì thay số 5 bằng 35.

    Chú ý:
    zzCodeMirror không sử dụng được cho phpBB2.
    Gỡ bỏ các mod, plugin liên quan đến khung code trước khi sử dụng.
    Nên upload lại file CSS và Javascript lên host của riêng bạn khi sử dụng, ví dụ như Google. Xem hướng dẫn tại đây.
    zzCodeMirror được tùy biến để nhận dạng 3 ngôn ngữ HTML - CSS - Javascript, đây là phần mình viết thêm nên nếu gặp lỗi thì gửi báo cáo ngay tại chủ đề này. Thử nghiệm tại http://jsfiddle.net/v6WUw/


    Phiên bản áp dụng

    phpBB3, punBB, Invision


    Source code


    CSS

    http://pastebin.com/523QrtQs

    Javascript

    http://pastebin.com/icPVNrXK


    Nguồn


    Zzbaivong (devs.forumvi.com)
    Tags: #tutorial
    You cannot reply to topics in this forum