Mãi Không Quên

cộng đồng teen

  • Thống kê diễn đàn


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

 :: PHẦN MỀM- MÁY TÍNH- INTERNET :: Web- Forumotion :: Hướng dẫn- Code

View previous topic View next topic Go down

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

Post by Bui Minh Phong™ 28/5/2014, 8:55 pm

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

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.  :P
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 :D

Ư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.



[Code] zzCodeMirror - Lựa chọn hàng đầu cho khung code của bạn DW1dj0a
Giao diện zzCodeMirror


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://devs.forumvi.com) */
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://devs.forumvi.com/35252.js" type="text/javascript"></script>
Tệp thay thế nếu lỗi:

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

Phiên bản áp dụng: phpBB2, phpBB3, punBB, Invision


Zzbaivong
Bui Minh Phong™
Bui Minh Phong™
Quản Trị Cấp Cao
Quản Trị Cấp Cao

Posts : 3260
Points : 370862
Thanked : 1927
Birthday : 1994-12-18
Status Hãy Lặng Yên Để Cảm Nhận Tình Yêu Xung Quanh Bạn :x
Giới tính : Male Rất dễ thương

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

Mãi Không Quên :: PHẦN MỀM- MÁY TÍNH- INTERNET :: Web- Forumotion :: Hướng dẫn- Code

 
Permissions in this forum:
You cannot reply to topics in this forum