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

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