[Code] zzPrismjs - Tối ưu khung code

  Bài viết hay nhất1
Trước đây, để làm nổi bật code, mình dùng Google Code Prettify, sau một thời gian, mình dần phát hiện ra các nhược điểm của nó, nhất là với các khung code dài.
Vì thế, mình đã tìm và thay thế nó bằng plugin Prismjs.

Ưu điểm:
  • Gọn nhẹ, mượt mà, dễ dàng tùy chọn giao diện và ngôn ngữ lập trình.
  • Không bị lỗi treo trình duyệt(firefox) ở những khung code dài.
  • Không bị cách đầu dòng khi sao chép code.
  • Kế thừa các tính năng bổ sung từ [You must be registered and logged in to see this link.].
  • Có thể tạo plugin dựa trên các API được cung cấp.

Nhược điểm:
  • Gây lỗi trình duyệt Chrome khi gặp script có chuỗi không phân tích được (hạn chế do mã regexp).



[You must be registered and logged in to see this image.]
Giao diện zzPrismjs


Hướng dẫn

Bước 1: Thêm vào CSS

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

Code:
/* zzPrismjs v1 by devs forumvi */
.codebox,.codebox *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.codebox{background:transparent;border:0 none;margin:0 0 10px}
.codebox dd{background:transparent;margin:0;padding:0}
.codebox > dt{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}
.codebox dd.cont_code{background:#FFF;max-height:100%!important;overflow:visible!important;position:relative;border:1px solid #e2e2e2}
.cont_code > code{overflow:auto;white-space:pre;display:block;line-height:17px;padding:10px;word-break:break-word}
.pun .controlCode,.pun .controlCode *{transition:all .3s;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;-ms-transition:all .3s}
.pun .controlCode{position:absolute;right:0;top:-30px;opacity:0}
.pun .codebox:hover .controlCode{opacity:1}
.pun .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}
.pun .controlCode input.findLine{background:url(http://i.imgur.com/8fxbcQy.png) no-repeat center #FFF!important;padding:0!important}
.pun .controlCode input.findLine:focus{background:#FFF!important;width:40px;text-align:center;color:#333;font-size:11px}
.pun .controlCode img.textCode{background-image:url(http://i.imgur.com/gXbPqhr.png)}
.pun .controlCode img.textCode.pretty{background-image:url(http://i.imgur.com/FJOia1z.png)}
.pun .controlCode :hover{cursor:pointer;border-color:#FFF}
/* prism.js Coy theme for JavaScript, CSS and HTML by Tim  Shedor */
code[class*="language-"],pre[class*="language-"]{color:#000;text-shadow:0 1px #FFF;white-space:pre}
pre.line-numbers{background-color:#fdfdfd;background-image:-webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);background-image:-moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);background-size:3em 2.6em;background-origin:content-box;position:relative;counter-reset:linenumber;overflow-y:hidden;padding:.1em 0 .1em 3.8em}
.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#7D8B99}
.token.punctuation{color:#5F6364}
.token.property,.token.tag,.token.boolean,.token.number,.token.function-name,.token.constant,.token.symbol{color:#c92c2c}
.token.selector,.token.attr-name,.token.string,.token.function,.token.builtin{color:#2f9c0a}
.token.atrule,.token.attr-value,.token.keyword,.token.class-name{color:#1990b8}
.token.regex,.token.important{color:#e90}
.token.operator,.token.entity,.token.url,.token.variable,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,0.5)}
.namespace{opacity:.7}
.token.important{font-weight:700}
.token.entity{cursor:help}
pre.line-numbers > code{padding:.1em 0;position:relative}
.line-numbers .line-numbers-rows{padding:.1em 0;background:#F5F2F0;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #DDD;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber}
.line-numbers-rows > span:before{content:counter(linenumber);color:rgba(0,0,0,0.3);display:block;padding-right:.7em;text-align:right}
@media print {code[class*="language-"],pre[class*="language-"]{text-shadow:none}}
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_bodyposting_preview

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

Code:
<script src="http://devs.forumvi.com/34660.js" type="text/javascript"></script>
Source 34660.js:

Chú ý:
Gỡ bỏ các mod, plugin liên quan đến khung code (ví dụ: [You must be registered and logged in to see this link.]) trước khi sử dụng zzPrismjs.
zzPrismjs đượ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.]


Zzbaivong
  Bài viết hay nhất2
[You must be registered and logged in to see this link.]
của mình sao ko chọn được code nhỉ Admin ơi...
  Bài viết hay nhất3
[You must be registered and logged in to see this link.]
hanphong wrote:
[You must be registered and logged in to see this link.]
của mình sao ko chọn được code nhỉ Admin ơi...
Mình đăng thiếu hàm selectCode, bạn cập nhật lại file script là được.
  Bài viết hay nhất4
Tks Ad....bác cho hỏi thêm vấn đề 1 chút...là sao khung code của mình ở dưới nó ko có cái thanh cuộn sang trái sang phải để xem toàn bộ dòng code nó dài nhỉ...vs cả Nếu mình không muốn nó hiện height 100%...mà mình muốn chuyển thu gọn code để nó có cái thanh cuộn lên xuống bên phải thì làm sao ak...Tks
Demo là topic ở trên...
  Bài viết hay nhất5
trong code css
dòng thứ 6 đổi lại thành
Code:
.codebox dd.cont_code{background:#FFF;overflow: auto;position:relative;border:1px solid #e2e2e2;max-height: 400px;}
  Bài viết hay nhất6
cái ẩn số dòng của em nó không hoạt động :v bác nào giúp cái :3

Demo: [You must be registered and logged in to see this link.]
Nicktest ID: test123
Passwork: test123456789
  Bài viết hay nhất7
Demo thì đưa cái link topic ấy, mà để nguyên cái link click cho nhanh.
  Bài viết hay nhất8
[You must be registered and logged in to see this link.]
anhoang_qn wrote:trong code css
dòng thứ 6 đổi lại thành
Code:
.codebox dd.cont_code{background:#FFF;overflow: auto;position:relative;border:1px solid #e2e2e2;max-height: 400px;}

cái này m có thử trước khi hỏi..nhưng nó khi nó có các thanh cuộn thì nó mất tính năng bổ sung từ zzPrettify. như Chọn code.v.v....mình thấy devs có cái thanh cuộn ở dưới kéo sang trái sang phải để xem dòng code dài...mà các tính năng khác vẫn còn nên mình hỏi..dù sao cũng Tks anhoang_qn...ai biết thì giúp mình vs...Tks
  Bài viết hay nhất9
Sếp baivong, bôi đen text bị hụt chữ này. Nhìn xấu lắm.


[You must be registered and logged in to see this image.]
  Bài viết hay nhất10
hanphong wrote:[You must be registered and logged in to see this link.]
anhoang_qn wrote:trong code css
dòng thứ 6 đổi lại thành
Code:
.codebox dd.cont_code{background:#FFF;overflow: auto;position:relative;border:1px solid #e2e2e2;max-height: 400px;}

cái này m có thử trước khi hỏi..nhưng nó khi nó có các thanh cuộn thì nó mất tính năng bổ sung từ zzPrettify. như Chọn code.v.v....mình thấy devs có cái thanh cuộn ở dưới kéo sang trái sang phải để xem dòng code dài...mà các tính năng khác vẫn còn nên mình hỏi..dù sao cũng Tks anhoang_qn...ai biết thì giúp mình vs...Tks
DÙng cái này
đổi dòng thứ 6 bằng 1 trong 2 code sau
+có thanh cuộn dưới - chiều cao hết cở
Code:
.codebox dd.cont_code{background:#FFF;max-height:100%!important;overflow: auto!important;position:relative;border:1px solid #e2e2e2}
+có thanh cuộn dưới và thanh cuộn dọc - chiều cao lớn nhất = 500px
Code:
.codebox dd.cont_code{background:#FFF;max-height:500px!important;overflow: auto!important;position:relative;border:1px solid #e2e2e2}
  Bài viết hay nhất11
[You must be registered and logged in to see this link.]
markai30 wrote:Sếp baivong, bôi đen text bị hụt chữ này. Nhìn xấu lắm.
Thay lại CSS nhé! :D
  Bài viết hay nhất12
[You must be registered and logged in to see this link.]
KaiJit_GC wrote:cái ẩn số dòng của em nó không hoạt động :v bác nào giúp cái :3

Demo: [You must be registered and logged in to see this link.]
Nicktest ID: test123
Passwork: test123456789
Xóa file script 16983.
  Bài viết hay nhất13
[You must be registered and logged in to see this image.]
@anhoang: 2Code bạn đưa gần như ko có gì thay đổi so vs code lúc ban đầu....ý mình muốn nói là ở Devs vừa có thanh cuộn dọc + thanh cuộn ngang + các tính năng 1 như mình khoanh ở hình ảnh Demo....còn code bạn giúp mình thì thay vô nó mất các tính năng 1 ấy....mình để
Code:
overflow:visible!important;
ở dòng 6 thì dùng được tính năng 1 nhưng không có các thanh cuộn...còn khi thay thành
Code:
overflow:auto!important;
thì có thanh cuộn nhưng mà ko dùng được tính năng 1
  Bài viết hay nhất14
Chủ đề này bị khóa vì Prismjs gặp lỗi nghiêm trọng với mã regex trên chrome!
  Bài viết hay nhất15
You cannot reply to topics in this forum