[TUTs] zzCodeMirror - Lựa chọn hàng đầu cho khung code của bạn

  Bài viết hay nhất1
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

[You must be registered and logged in to see this image.]
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 [You must be registered and logged in to see this link.].
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 [You must be registered and logged in to see this link.]


Phiên bản áp dụng

phpBB3, punBB, Invision


Source code


CSS

[You must be registered and logged in to see this link.]

Javascript

[You must be registered and logged in to see this link.]


Nguồn


Zzbaivong (devs.forumvi.com)
Tags: [You must be registered and logged in to see this link.]
  Bài viết hay nhất2
nhìn cái bước 2 thôi là đủ thấy nó nặng rồi - cơ mà devs xài mình load thấy mượt mà - k bị giật đoạn nào - vote
  Bài viết hay nhất3
bước 2 nặng thế ... quá trời css + JS !! Ực Ực :fb120: :fb158:
  Bài viết hay nhất4
Update: All version (^^^)
  Bài viết hay nhất5
Forum của mình sử dụng skin FMvi với Thống kê bài viết 3 cột. Sau khi thực hiện theo hướng dẫn của Zzbaivong thì phát sinh một vấn đề: Khi đang load trang thì hiển thị đầy đủ 4 nút chức năng (Nhập số dòng muốn chuyển đến, Ẩn số dòng, Click để chọn toàn bộ code và default). Tuy nhiên khi load xong thì nút số 2 và số 3 thay đổi thành "Click để xem kích thước thật".

[You must be registered and logged in to see this image.]
Khi đang load trang

[You must be registered and logged in to see this image.]
Khi load xong

Mình đã thử bỏ đoạn:

Code:
<script type="text/javascript" src="https://dl.dropbox.com/u/24716029/libjs/fmvi-v2-overall_footer_end.js">
</script>

trong overall_footer_end thì hết lỗi trên. Tuy nhiên, "last topic của Thống kê bài viết 3 cột" cùng chức năng "Click để xem kích thước thật" cũng bị mất theo.

[You must be registered and logged in to see this image.]

Chức năng "Click để xem kích thước thật" có thể dùng "Xem ảnh bằng LightBox kết hợp Lazyload" để thay thế nhưng "last topic của Thống kê bài viết 3 cột" thì mình không biết phải làm sao để nó hoạt động trở lại được. Rất mong mọi người giúp đỡ để mình có thể vừa sử dụng được zzCodeMirror, vừa giữ lại được skin FMvi.
  Bài viết hay nhất6
Mở ACP >> Display >> QLTT >> index_body, thêm vào đoạn sau:

Code:
<script type="text/javascript">
      //<![CDATA[         
      var versionMinor = parseFloat(navigator.appVersion),
      versionMajor = parseInt(versionMinor),
      IE = document.all && !window.opera && 7 > versionMajor,
      IE7 = document.all && !window.opera && 7 <= versionMajor,
      OP = window.opera,
      FF = document.getElementById,
      NS = document.layers;
      function get_item(a, c) {       
        if (IE) return c ? window.opener.document.all[a] : document.all[a];       
        if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);       
        if (NS) return c ? window.opener.document.layers[a] : document.layers[a]   
      }         
      var current_tooltip;
      function show_tooltip(a, c) {       
        var b = get_item("tooltip");       
        b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));       
        b.style.zIndex = 1000;       
        b.style.position = "absolute";       
        b.innerHTML = "<p>" + c + "</p>";       
        b.style.visibility = "visible";       
        a.onmousemove = move_tooltip;       
        a.onmouseout = function() {           
            b.style.visibility = "hidden"       
        };       
        a.title = ""   
      }   
      var offsetxpoint = -60,
      offsetypoint = 20,
      real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
      real_body = document.documentElement ? document.documentElement : document.body;
      function move_tooltip(a) {       
        var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
        d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
        b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
        e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
        f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;       
        current_tooltip = get_item("tooltip");       
        current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";       
        current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"   
      }   
      $("#recent_topics li a:first-child").mouseover(function() {       
        show_tooltip(this, $(this).next().html())   
      });   
      $("#active_topics a, #viewed_topics a").mouseover(function() {       
        show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));   
      }).after(function() {       
        return '<span class="lastRight">' + $(this).attr("alt").replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'   
      });    //]]>
  </script>

Nguồn: Zzbaivong
  Bài viết hay nhất7
[You must be registered and logged in to see this image.]

Xin chân thành cảm ơn bạn thanhha, Zzbaivong cùng diễn đàn đã giúp mình giải quyết được vấn đề.
  Bài viết hay nhất8
Mặc dù mình không chỉnh sửa code nhưng mấy ngày gần đây, 4 nút chức năng (Nhập số dòng muốn chuyển đến, Ẩn số dòng, Click để chọn toàn bộ code và default) tự nhiên bị mất.

[You must be registered and logged in to see this image.]

Rất mong nhận được sự giúp đỡ của các bạn. Xin cảm ơn.

Demo: [You must be registered and logged in to see this link.]

Nick test: Panda

Password: 0123456789min
  Bài viết hay nhất9
Do CodeMirror chặn các site bên ngoài sử dụng file của họ nên mới xảy ra lỗi đó. Bạn chỉ cần upload lại các file css và js lên host riêng là được.
  Bài viết hay nhất10
Cập nhật hướng dẫn. Xem [You must be registered and logged in to see this link.]
  Bài viết hay nhất11
mình ko thể bỏ hết vào được, nó ko cho làm sao ?
  Bài viết hay nhất12
[You must be registered and logged in to see this link.]
kingofgame wrote:mình ko thể bỏ hết vào được, nó ko cho làm sao ?
CSS của bạn quá dài, bạn xem cái nào không dùng thì xóa nó đi.
  Bài viết hay nhất13
dùng thẻ <style> được ko nhỉ
  Bài viết hay nhất14
Nhưng nó sẽ load bản chưa có CSS trước gây phiền toán cho người dùng gấp, sẽ tải bản chưa có CSS rồi vài giây sau mới co CSS
  Bài viết hay nhất15
You cannot reply to topics in this forum