Mình đã từng giới thiệu 2 cách làm nổi bật khung code dùng plugin Google Code Prettify hoặc Prismjs, chúng tương đối nhẹ - nếu so với plugin CodeMirror trong bài hôm nay.  
CodeMirror được sử dụng rất nhiều trong chỉnh sửa code trực tuyến. Ở forumotion, nó được dùng trong chỉnh sửa CSS, templates, html page.
Đây thật sự là một plugin rất tuyệt vời, tốc độ xử lý rất nhanh và ổn định, dùng CodeMirror chỉ để tô màu code thì hơi có chút gọi là: "Giết gà bằng dao mổ trâu"   >:O  
Ps: Lúc đặt tựa đề mình định ghi là "Lựa chọn tốt nhất", nhưng nghe đồn dùng từ nhất lung tung sẽ bị phạt

Chức năng

Ưu điểm:

• Xử lý nhanh, phân biệt tốt các selector, attribute, regexp...
  
• 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.
  

Nhược điểm:

• Tổng dung lượng cài đặt lớn.
  

Demo

Hướng dẫn

Bước 1

Thêm vào CSS

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* zzCodeMirror v1 by zzbaivong (http://www.devs.cf) */
dl.codebox,dl.codebox *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
dl.codebox{background:transparent;border:0 none}
dl.codebox dd{background:transparent;margin:0;padding:0}
dl.codebox > dt{margin:0;font-size:1em;text-transform:uppercase;position:relative;background:url(//i83.servimg.com/u/f83/16/58/89/73/page_w10.png) no-repeat scroll 10px center #777;color:#FFF;border:1px solid #e2e2e2;height:30px!important;border-bottom-width:0;line-height:26px!important;padding:2px 10px 0 30px!important}
dl.codebox dd{background:#FFF;max-height:100%!important;overflow:visible!important;position:relative;border:1px solid #e2e2e2}
.controlCode,.controlCode *{transition:all .3s;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;-ms-transition:all .3s}
.controlCode{position:absolute;right:0;top:-30px;opacity:0}
dl.codebox:hover .controlCode{opacity:1}
.controlCode *{width:20px;height:20px!important;display:block;float:right;border:1px solid #999;background:url(http://i.imgur.com/ccn5y7c.png) no-repeat center #FFF;margin:4px 4px 0 0 !important}
.controlCode input.findLine{background:url(http://i.imgur.com/8fxbcQy.png) no-repeat center #FFF!important;padding:0!important}
.controlCode input.findLine:focus{background:#FFF!important;width:40px;text-align:center;color:#333;font-size:11px}
.controlCode img.textCode{background-image:url(http://i.imgur.com/gXbPqhr.png)}
.controlCode img.textCode.pretty{background-image:url(http://i.imgur.com/FJOia1z.png)}
.controlCode :hover{cursor:pointer;border-color:#FFF}
pre{counter-reset:linenumber;overflow:auto;margin:0;padding:1em}
dl.codebox code{color:inherit;display:block;height:100%;max-height:100%;overflow:visible;white-space:pre;margin:0 0 0 3em;padding:0}
.lineNumber{pointer-events:none;width:3em;letter-spacing:-1px;border-right:1px solid rgba(125,125,125,0.37);float:left;margin-left:-1em}
dl.codebox code,.lineNumber{font-size:1em !important;line-height:1.3em!important}
.lineNumber > span{pointer-events:none;display:block;counter-increment:linenumber}
.lineNumber > span:before{content:counter(linenumber);font-family:monospace;color:#999;display:block;padding-right:.8em;text-align:right}
.controlCode select.chgStyle{background-image:url(http://i.imgur.com/euxhSeC.png);text-indent:-9999px;text-align:right}
.controlCode select.chgStyle option{background:none repeat scroll 0 0 transparent;border:0 none;text-indent:0;width:auto;padding:0 5px}
/* CodeMirror default theme */
code .cm-keyword{color:#708}
code .cm-atom{color:#219}
code .cm-number{color:#164}
code .cm-def{color:#00f}
code .cm-variable-2{color:#05a}
code .cm-variable-3{color:#085}
code .cm-comment{color:#a50}
code .cm-string{color:#a11}
code .cm-string-2{color:#f50}
code .cm-builtin{color:#30a}
code .cm-bracket{color:#997}
code .cm-tag{color:#170}
code .cm-attribute{color:#00c}
code .cm-header{color:blue}
code .cm-quote{color:#090}
code .cm-hr{color:#999}
code .cm-link{color:#00c;text-decoration:underline}
code .cm-negative{color:#d44}
code .cm-positive{color:#292}
code .cm-header,code .cm-strong{font-weight:700}
code .cm-em{font-style:italic}
code .cm-meta{color:#555}
code .cm-qualifier{color:#0095C6}
code .cm-error,code .cm-invalidchar{color:red}

Cách giới hạn chiều cao khung code 250px:

Bước 2

Thêm code vào cuối 2 temp viewtopic_body và posting_preview

ACP >> Display >> Templates >> QLTT >> viewtopic_body
ACP >> Display >> Templates >> Post & Private Messages >> posting_preview

Code:

<link rel="stylesheet" href="http://codemirror.net/theme/3024-day.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/3024-night.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/base16-dark.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/base16-light.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/blackboard.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/eclipse.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/elegant.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/erlang-dark.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/lesser-dark.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/mbo.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/mdn-like.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/midnight.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/monokai.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/neat.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/neo.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/night.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/paraiso-dark.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/paraiso-light.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/pastel-on-dark.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/rubyblue.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/solarized.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/the-matrix.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/tomorrow-night-eighties.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/twilight.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/vibrant-ink.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/xq-dark.css" />
<link rel="stylesheet" href="http://codemirror.net/theme/xq-light.css" />
<script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
<script src="http://codemirror.net/addon/runmode/runmode.js" type="text/javascript"></script>
<script src="http://codemirror.net/mode/xml/xml.js" type="text/javascript"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js" type="text/javascript"></script>
<script src="http://codemirror.net/mode/css/css.js" type="text/javascript"></script>
<script src="http://www.devs.cf/35300.js" type="text/javascript"></script>

Chú ý:
Đối với phiên bản phpBB2 thì trong bước 2, bạn thêm code dưới đây vào trước file javascript cuối cùng:

Code:

<script type="text/javascript">
//<![CDATA[
$(".cont_code").replaceWith(function(){
   return "<code>" + this.innerHTML + "</code>";
});
//]]>
</script>

Gỡ bỏ các mod, plugin liên quan đến khung code (ví dụ: zzPrettify và zzPrismjs) trước khi sử dụng zzCodeMirror.
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

phpBB2, phpBB3, punBB, Invision

Nguồn:

Plugin CodeMirror (codemirror.net)
Zzbaivong (devs.forumvi.com)

Thời gian gần đây, do CodeMirror chặn các site bên ngoài sử dụng file của họ nên có thể xảy ra lỗi khiến 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.


Khi gặp lỗi trên, bạn chỉ cần upload lại các file css và js lên host riêng là được (Xem thêm bài Hướng dẫn upload file CSS và Javascript lên host của Google tại đây).

Đơn giản hơn, bạn có thể thực hiện lại Bước 2 theo hướng dẫn bên dưới

Thêm code vào cuối 2 temp viewtopic_body và posting_preview

ACP >> Display >> Templates >> QLTT >> viewtopic_body
ACP >> Display >> Templates >> Post & Private Messages >> posting_preview

Code:

<link rel="stylesheet" href="http://baivong.github.io/cdn/devsforumvi/css/cm-theme.css" />
<script src="http://baivong.github.io/cdn/devsforumvi/js/35300.js" type="text/javascript"></script>

Mã nguồn:

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