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

  Bài viết hay nhất1
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 để chọn toàn bộ code",
         style: "cursor:pointer"
      }), $.getScript("http://devs.forumvi.com/11727.js", function () {
         prettyPrint()
      }));
});

Zzbaivong
  Bài viết hay nhất2
Not working brother. My forum is PunBB. Any help?
http://www.bdtipsntricks.com/t353-full-tutorial-how-to-add-facebook-comment-plugin-in-your-website-blog-or-forum
  Bài viết hay nhất3

I wasn't found it in your source. Seems that you don't follow my tutorial.
  Bài viết hay nhất4
Yes, I have followed the tutorial, but got errors. So I removed that. If you are online now, I can try.
  Bài viết hay nhất5
If you do follow right my tutorial, there will result:

http://imgur.com/n8Wl982 :D
  Bài viết hay nhất6
Thanks you, it's working. I found the problem. You forum language is VN. So, Google translator automatically changing the language. At that time the code was also changing. :P

Solved :)
  Bài viết hay nhất7
làm mãi mak vẫn ko dk
  Bài viết hay nhất8
harryumefor wrote:làm mãi mak vẫn ko dk
không được thì hỏi + demo nhá bạn :)
anhoang_qn
  Bài viết hay nhất9
cảm ơn bạn đã chia sẻ. Mình hỏi thêm là khi viết trong thẻ Code mình test vẫn chưa thấy chức năng ở góc phải trên của khung code (không thấy nút - và = cạnh nhau)
  Bài viết hay nhất10
bluehnvn wrote:cảm ơn bạn đã chia sẻ. Mình hỏi thêm là khi viết trong thẻ Code mình test vẫn chưa thấy chức năng ở góc phải trên của khung code (không thấy nút - và = cạnh nhau)
Những chức năng đó mình không chia sẽ trong bài viết này.
You cannot reply to topics in this forum