[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


[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
  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

ashik4u wrote: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
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:

https://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.
  Bài viết hay nhất11
You cannot reply to topics in this forum