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


[Code] Làm đẹp code với Google code prettify

View previous topic View next topic Go down

[Code] Làm đẹp code với Google code prettify Empty [Code] Làm đẹp code với Google code prettify

Post by Bui Minh Phong™ 14/12/2013, 5:33 pm

[You must be registered and logged in to see this link.]
Hướng dẫn này sẽ làm cho khung code của bạn đẹp và dễ nhìn hơn:

  1. Phân dòng code
  2. Màu riêng cho các phần tử, biến, hàm...
  3. Chọn toàn bộ khi nhấn vào tiêu đề khung Code
  4. Sửa lỗi màu trên punBB

Khung code bình thường
Khung code dùng Google code prettify


Bước 1: ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:
.codebox dd.cont_code{background:#FFF;max-height:100%;overflow:auto;border:1px solid #e2e2e2;margin:0;padding:0}
.cont_code > code{white-space:pre;display:block;line-height:17px;padding:10px}
/* Code prettify */
.prettyprint.linenums{box-shadow:inset 50px 0 0 #eeeeee, inset 51px 0 0 #ececf0}
.prettyprint ol.linenums{padding-left:44px;margin:0;list-style-type: decimal;}
.prettyprint ol.linenums li{padding-left:12px!important;color:#999;line-height:10pt;text-shadow:0 1px 0 #fff;margin-bottom:5px}
.pln{color:#48484c}
@media screen {
.lit{color:#195f91}
.fun{color:#dc322f}
.str,.atv{color:#D14}
.kwd,.tag{color:#1e347b}
.typ,.atn,.dec,.var{color:teal}
.com,.pan,.opn,.clo{color:#93a1a1}
}
@media print,projection {
.com{color:#600;font-style:italic}
.typ{color:#404;font-weight:700}
.lit{color:#044}
.pan,.opn,.clo{color:#440}
.atn{color:#404}
.str,.atv{color:#060}
.kwd,.tag{color:#006;font-weight:700}
}

Bước 2: ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript: In the topics

Javascript Code * :
Code:
function selectCode(a) {
    a = $(a).closest(".codebox").find("CODE")[0];
    if (window.getSelection) {
        var b = window.getSelection();
        if (b.setBaseAndExtent) b.setBaseAndExtent(a, 0, a, a.innerText.length - 1);
        else {
            window.opera && "<BR>" == a.innerHTML.substring(a.innerHTML.length - 4) && (a.innerHTML += " ");
            var c = document.createRange();
            c.selectNodeContents(a);
            b.removeAllRanges();
            b.addRange(c)
        }
    } else document.getSelection ? (b = document.getSelection(), c = document.createRange(), c.selectNodeContents(a), b.removeAllRanges(), b.addRange(c)) : document.selection && (c = document.body.createTextRange(), c.moveToElementText(a), c.select())
}
$(function () {
    $(".post code").length && ($(".post code br").replaceWith("\n"),
        $(".post code").addClass("prettyprint linenums").parent().prev().attr({
            onclick: "selectCode(this)",
            title: "Click \u0111\u1ec3 ch\u1ecdn to\u00e0n b\u1ed9 code",
            style: "cursor:pointer"
        }), $.getScript("http://devs.forumvi.com/11727.js", function () {
            prettyPrint()
        }));
});

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

Posts : 3260
Points : 371212
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

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