Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

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

    Quản trị viên

    baivong

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     21.08.15 13:16 

    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


    [TUTs] Làm đẹp code với Google code prettify 11-25-14
    Khung code bình thường

    [TUTs] Làm đẹp code với Google code prettify 11-25-15
    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 để chọn toàn bộ code",
             style: "cursor:pointer"
          }), $.getScript("http://devs.forumvi.com/11727.js", function () {
             prettyPrint()
          }));
    });

    Zzbaivong
    You cannot reply to topics in this forum