JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

Syntax Highlighter v1.07

3 participantes

Ir para baixo  Mensagem [Página 1 de 1]

1Syntax Highlighter v1.07 Empty Syntax Highlighter v1.07 Qua 17 Jul 2013, 10:04 pm

JScript

JScript
Administradores
Administradores



Syntax Highlighter v1.07
Syntax Highlighter

Créditos: https://github.com/balupton/jquery-syntaxhighlighter
Nota: Versão release, fase de implementação.
Código implementado por JScript!

- Editando Templates
Aceda em:

Painel de Controle
Visualização -> Templates -> Geral


Selecione o template Overall_header e cole o código abaixo dentro da tag <head> no final dela, mais especificamente: antes de </head>!
Código:

<script type="text/javascript">
/* Syntax Highlighter by JScript - 2013-07-17 | http://jscript.forumeiros.com */
        jQuery(function () {
            jQuery('code').each(function () {
                var sContent = jQuery(this).html();
                var codebox = jQuery(this).parent().parent();
                codebox.before('<div class="punbbtop">PunBB &nbsp; &nbsp; &nbsp; &nbsp;<button onclick="punbbExpand(this); return false;">expand</button><button style="display: none" onclick="punbbCollapse(this); return false;">collapse</button>&nbsp; <button onclick="punbbSelect(this); return false;">select</button>&nbsp; <button onclick="punbbPopup(this); return false;">popup</button>&nbsp; <button style="margin-right: 50px; float: right;" onclick="punbbAbout(this); return false;">?</button></div></div></div><pre class="highlight punbb_block">' + sContent + '</pre>');
                codebox.remove();
            });
            jQuery.getScript('http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js', function () {
                jQuery.SyntaxHighlighter.init({
                    'wrapLines': false
                })
            })
        });
        function punbbExpand(oThis) {
            jQuery(oThis).css('display', 'none');
            jQuery(oThis).next().css('display', '');
            jQuery(oThis).parent().next('pre.punbb_block').addClass('expand');       
        }
        function punbbCollapse(oThis) {
            jQuery(oThis).css('display', 'none');
            jQuery(oThis).prev().css('display', '');
            /*jQuery(oThis).parent().parent().find('pre.punbb_block').css('height', '250px;');*/
            jQuery(oThis).parent().next('pre.punbb_block').removeClass('expand');
        }
        function punbbPopup(oThis) {
            var content = jQuery(oThis).parent().next('pre.punbb_block').html();
            var my_window = window.open("", "PunBB code - Para selecionar o código: [Ctrl] + [A]", "scrollbars=1toolbar=no,menubar=no,personalbar=no,status=0,left=0,location=0,menubar=0,top=0,width=640,height=480");
            my_window.document.write('<pre>'+content+'</pre>');
        }
        function punbbAbout(oThis) {
            alert('Simple code to add Syntax Highlighter fuctionality for PunBB-Forumeiros\n\nBy JScript FROM Brazil - 2013/07/17\n');
        }
        function punbbSelect(oThis) {
            var doc = document;
            var text = jQuery(oThis).parent().next('pre.punbb_block')[0];
            if (doc.body.createTextRange) {
                var range = doc.body.createTextRange();
                range.moveToElementText(text);
                range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();
                var range = doc.createRange();
                range.selectNodeContents(text);
                selection.removeAllRanges();
                selection.addRange(range);       
            }
        }
</script>         
Não esqueça de publicá-lo!

Adicione ao CSS o seguinte código:
Código:

/* syntaxhighlighter */
code.punbb_block, pre.punbb_block {
  background-color: #FAFAFA !important;
  border: 1px solid #C9C9C9 !important;
  color: #000000;
  font-family: Consolas,"Bitstream Vera Sans Mono","Andale Mono",Monaco,"DejaVu Sans Mono","Lucida Console",monospace !important;
  font-size: 11px !important;
  line-height: 110% !important;
  max-height: 250px !important;
  overflow: auto !important;
  padding: 5px !important;
  white-space: pre-wrap !important;
  width: auto !important;
}
.punbbtop {
    background: url("http://i34.servimg.com/u/f34/18/17/62/92/punbb_11.png") no-repeat scroll right center #E3E9F2;
    color: #1D3652;
    font-size: 10px;
    font-weight: bold;
    line-height: 100%;
    /*margin-left: 10px;*/
    margin-top: 5px;
    padding: 2px 1px 2px 3px;
}
.punbbtop button {
    background: -moz-linear-gradient(center top , #EDEDED 5%, #DFDFDF 100%) repeat scroll 0 0 #EDEDED;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    color: #1D3652;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    padding: 0 6px;
    text-decoration: none;
}
.punbbtop button:hover {
    background: -moz-linear-gradient(center top , #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF;
    border-color: #9A9A9A;
    color: #3D70A3;
}
.punbbtop button:active {
    position: relative;
    top: 1px;
}
pre.punbb_block.expand,
code.punbb_block.expand {
    max-height: 100% !important;
}
.pun .entry-content ol, .pun .entry-content ul {
  margin-left: 0px;
}
.prettyprint ol.linenums {
  color: #AEAEAE !important;
  font-size: 11px;
  list-style: decimal outside none;
  padding-left: 45px;
}
.prettyprint ol.linenums li {
  border-left: 1px solid #EEEEEE !important;
  padding-left: 5px !important;
}
.prettyprint li > * {
  font-size: 11px !important;
}
ol.linenums > li span.pun {
  background: none repeat scroll 0 0 transparent;
  box-shadow: none;
  color: #666666 !important;
   padding-left: 2px;
   padding-right: 2px; 
}
- Resultado
Syntax Highlighter v1.07 Captur12

Link para visualização: http://jscript.forumeiros.com/
Nota: O código está otimizado para um carregamento mais rápido!!!




PunBB Forumeiros


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Syntax Highlighter v1.07



Última edição por JScript em Seg 09 Set 2013, 7:38 pm, editado 8 vez(es)

http://autoitbrasil.com

2Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Qua 17 Jul 2013, 10:13 pm

joelson0007

joelson0007
Moderadores
Moderadores

nota 10, agora da gosto de postar códigos, ficou show de bola, parabéns por esta novidade.
até mais.

3Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Qua 17 Jul 2013, 10:19 pm

JScript

JScript
Administradores
Administradores

Obrigado @joelson0007!

Eu já não aguentava mais olhar para aquela aparência tosca que estava no código, agora está mais confortável a leitura e interpretação...

JS

http://autoitbrasil.com

4Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Qui 18 Jul 2013, 1:52 am

Convidado

avatar
Convidado

Poderia remover a função "Expand" pra mim?

5Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Qui 18 Jul 2013, 1:57 am

JScript

JScript
Administradores
Administradores

Olá!

Sim, abra um tópico em http://jscript.forumeiros.com/f18-templates-modificados e farei o que deseja!

Abraços,

JS

http://autoitbrasil.com

6Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Qui 18 Jul 2013, 1:40 pm

Convidado

avatar
Convidado

Show JScript, é uma ótima função!Obrigado por compartilhar conosco!
Inovador, eu nunca tinha visto deste geito...

7Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Qui 18 Jul 2013, 2:16 pm

JScript

JScript
Administradores
Administradores

Olá amigo!

Fico feliz por você ter gostado do "efeito", obrigado!

Como pode ver eu gosto das coisas bem trabalhadas, nada de cores fortes e escuras, tudo com classe e estilo, é assim que gosto!

JS

http://autoitbrasil.com

8Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Sex 19 Jul 2013, 9:55 am

Convidado

avatar
Convidado

Mas fica uma dúvida, este código somente funciona ao visualizar na página(scroll)?

9Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Sex 19 Jul 2013, 10:15 am

JScript

JScript
Administradores
Administradores

Achei melhor não pois ele não faz requisições ao servidor Forumeiros e não é tão "pesado"...

JS

http://autoitbrasil.com

10Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Sex 19 Jul 2013, 5:20 pm

Convidado

avatar
Convidado

sabem como sou burro nao consegui o template ´-´

11Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Sáb 10 Ago 2013, 7:18 pm

Convidado

avatar
Convidado

Isso realmente é muito bom, obrigado.

12Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Sáb 10 Ago 2013, 7:24 pm

JScript

JScript
Administradores
Administradores

Sea escreveu:Isso realmente é muito bom, obrigado.
Fico bastante feliz por você ter gostado!

Isso é o meu combustível pra seguir em frente,

JS

http://autoitbrasil.com

13Syntax Highlighter v1.07 Empty Re: Syntax Highlighter v1.07 Sáb 31 Ago 2013, 7:40 am

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Estava atrás disso, muito bom Very Happy

http://wagneraugusto.com.br/

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos