[TUTORIAL] Opção Syntax Highlighter

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Opção Syntax Highlighter

Mensagem por BrunoH. em 13/07/14, 01:24 pm



Syntax Highlighter

Personalizando a caixa de códigos do fórum, agora temos uma nova função que adiciona o efeito Syntax Highlighter com funções de expandir o código na janela, selecionar todo o código para ser copiado e abrir o código em uma janela Popup!


--> Tutoriais, dicas e astúcias <--
Opção Syntax Highlighter



- Código a ser utilizado:
Código:
/***
* Syntax Highlighter funtionality for Forumotion!
* (c) http://balupton.github.io
* Version: 1.28082013-jq1.9.1
* Made by JScript - 2013/12/16
*/
jQuery(function () {
    var sCSS = '<style>' +
        '/***' +
        '* Syntax Highlighter funtionality for Forumotion!' +
        '* CSS: .codebox dd.cont_code' +
        '* (c) http://balupton.github.io' +
        '* Version: 1.28082013-jq1.9.1' +
        '* Made by JScript - 2013/12/16' +
        '*/' +
        '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-color: #FFDEAD !important;' +
        '  color: #1D3652;' +
        '  font-size: 10px;' +
        '  font-weight: bold;' +
        '  line-height: 100%;' +
        '  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;' +
        '}' +
        '.prettyprint ol.linenums {' +
        '  padding-left: 15px !important;' +
        '}' +
        '</style>';
    jQuery(sCSS).insertBefore('#page-body');

    if (jQuery('.cont_code').length) {
        var tagCode = jQuery('.cont_code');
    } else {
        if (jQuery('.cont_code').length) {
            var tagCode = jQuery('.code');
        } else {
            var tagCode = jQuery('code');       
        }
    }
    tagCode.each(function () {
        var sContent = jQuery(this).html();
        var codebox = jQuery(this).parent().parent();
        codebox.before('<div class="punbbtop">Code        <button onclick="punbbExpand(this); return false;">expand</button><button style="display: none" onclick="punbbCollapse(this); return false;">collapse</button>  <button onclick="punbbSelect(this); return false;">select</button>  <button onclick="punbbPopup(this); return false;">popup</button>  <button style="margin-right: 50px; float: right;" onclick="punbbAbout(this); return false;">?</button></div><pre class="highlight punbb_block">' + sContent + '</pre>');
        codebox.remove();
    });
    jQuery.getScript('http://balupton.github.io/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().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","scrollbars=1,toolbar=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 Forumotion\n\nBy JScript FROM Brazil - 2013/12/16\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);       
    }
}


- Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

  • Resultado:




© Fórum dos Fóruns


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Opção Syntax Highlighter
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum