[Tutorial] Code personalizado (Prettify)

Informações:
Autor: Zzbaivong
Funcionalidade: Todas as versões

---

Acesse:

Painel de Controle ☛ Modulos ☛ Html e Javascript ☛ Gestão dos codigos Javascript

E Crie um novo Javascript com investimento em todas as paginas com esse código:

Código:

  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: "Select code",
          style: "cursor:pointer"
       }), $.getScript("http://goo.gl/twC3vt", function () {
          prettyPrint();
          $(".codebox dd.cont_code").prepend('<img class="textCode" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
    " /><input class="findLine" size="4" maxlength="4" type="text" />');
          $(".codebox dd.cont_code .findLine").on("input", function () {
             this.value = /\d+/g.exec(this.value);
             $(window).scrollTop($(this).offset().top)
          }).keydown(function (a) {
             if (13 == a.keyCode) {
                a = parseInt(this.value, 10);
                var b = $(this).next(),
                   c = b.offset().top,
                   h = b.height(),
                   s = c + h,
                   d = 17 * a - 7;
                if (0 == a || d + 13 > h) d = h - 20;
                $(window).scrollTop(c + d);
                this.value = ""
             }
          });
          $(".textCode").click(function () {
             $(this).toggleClass("pretty");
             var code = $(this).next().next();
             if ($(this).hasClass("pretty")) {
                $("li", code).after("\n");
                code.removeClass().text(function () {
                   return $(this).text()
                }).html(function () {
                   return $(this).html().replace(/\n/g, "<br />")
                });
             } else {
                $(".post code br").replaceWith("\n");
                code.addClass("prettyprint linenums");
                prettyPrint();
             }
          });
       }));
    });

Depois disto, acesse:

Painel de Controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de Estilo CSS

E Adicione esse código :

Código:

.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;border-bottom-width:0;line-height:26px;padding:2px 10px 0 30px;width:90px}
    .codebox dd.cont_code{background:#FFF;max-height:100%;overflow:visible;position:relative;border:1px solid #e2e2e2}
    .codebox dd.cont_code input.findLine{width:30px;text-align:center;position:absolute;right:28px;background:url(http://i56.servimg.com/u/f56/18/59/49/93/list210.png) no-repeat scroll center center #fff!important;top:-30px;height:30px!important;transition:width .3s ease 0;border:1px solid #DDD;padding:0!important}
    .codebox dd.cont_code input.findLine:focus{color:#333;background:#FFF!important;width:50px}
    .cont_code > code{overflow:auto;white-space:pre;display:block;line-height:17px;padding:10px}
    .codebox > dt:hover, .pun img.textCode:hover{color:#333;background-color:#F2F2F2}
    .pun img.textCode{width:30px;height:30px;position:absolute;right:-1px;top:-30px;border:1px solid #e2e2e2;background:url(http://i56.servimg.com/u/f56/18/59/49/93/code10.png) no-repeat 6px 6px transparent;background-clip:content-box;cursor:pointer;padding:5px;transition:background .3s;-webkit-transition:background .3s;-moz-transition:background .3s;-o-transition:background .3s;-ms-transition:background .3s}
    .pun img.textCode.pretty{background-position:6px -10px}
    /* Code prettify by google */
    .prettyprint.linenums{box-shadow:inset 50px 0 0 #eeeeee, inset 51px 0 0 #ececf0}
    .prettyprint ol.linenums{padding-left:44px;margin:0}
    .prettyprint ol.linenums li{position:relative;padding-left:12px!important;color:#999;line-height:17px;text-shadow:0 1px 0 #fff}
    .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}
    }

Resultado: