Colocar tag código nos tópicos

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

Resolvido Colocar tag código nos tópicos

Mensagem por jsvenancio em 24/01/14, 03:09 pm

Qual é minha questão:
Boa tarde.
Gostaria de saber se é possível colocar nos tópicos do meu forum esta ferramenta de "Código" que mostro na imagem abaixo;



Se é possível, como o faço?

Endereço do meu fórum:
http://obloggueiro.forumaqui.com

Versão do fórum:
PHPBB3


Última edição por jsvenancio em 27/01/14, 05:40 pm, editado 1 vez(es)
avatar

jsvenancio
Nível 7

Masculino
Inscrito dia : 03/07/2013
Mensagens : 97
Pontos Ativos : 152

Ver perfil do usuário http://obloggueiro.forumaqui.com/ https://www.facebook.com/obloggueiro

Resolvido Re: Colocar tag código nos tópicos

Mensagem por Shek em 24/01/14, 06:06 pm



Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17159
Pontos Ativos : 21416

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Colocar tag código nos tópicos

Mensagem por jsvenancio em 24/01/14, 07:14 pm


Tentei resolver usando esses dois tópicos e ainda um outro, [TUTORIAL] Caixa de código com contador de linhas.
Ainda não consegui resolver.
avatar

jsvenancio
Nível 7

Masculino
Inscrito dia : 03/07/2013
Mensagens : 97
Pontos Ativos : 152

Ver perfil do usuário http://obloggueiro.forumaqui.com/ https://www.facebook.com/obloggueiro

Resolvido Re: Colocar tag código nos tópicos

Mensagem por Shek em 25/01/14, 09:49 am

Bom dia!

Consulte as informações do Spoiler:
TUTORIAL:

 

Prettifier


Você já viu em sites externos que quando é mostrado alguma caixa de código, há números ao lado esquerdo e o códgo ao lado direito, sendo colorido. Este efeito é o que chamamos de prettifier


--> Tutoriais <--
Prettifier nas caixas de códigos



- Javascript dos fóruns:
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. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
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.
Na opção do Investimento, marque a opção "Nos tópicos" e cole o código abaixo:
Código:
jQuery(function () {
if ($("code").filter(function () {
var a = $(this).text().indexOf("["),
b = $(this).text().indexOf("]"),
c = $(this).text().indexOf("[/"),
d = $(this).text().indexOf("<"),
e = $(this).text().indexOf('"'),
f = $(this).text().indexOf("'"),
g = $(this).text().indexOf("/");
return a == -1 || b == -1 || c == -1 || a > b || b > c || d != -1 && d < a || e != -1 && e < a || f != -1 && f < a || g != -1 && g < a
}).each(function () {
$(this).wrapInner('<pre class="prettyprint' + ($(this).text().indexOf("<") == -1 && /[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text()) ? " lang-css" : "") + ' linenums" />')
}).length) {
var s = document.createElement("script");
s.type = "text/javascript";
s.async = !0;
s.src = "http://maonyn.yemenforums.net/25998.js";
document.getElementsByTagName("head")[0].appendChild(s)
};
});

PHPBB2:
Código:
jQuery(function () {
if ($("div.cont_code").filter(function () {
var a = $(this).text().indexOf("["),
b = $(this).text().indexOf("]"),
c = $(this).text().indexOf("[/"),
d = $(this).text().indexOf("<"),
e = $(this).text().indexOf('"'),
f = $(this).text().indexOf("'"),
g = $(this).text().indexOf("/");
return a == -1 || b == -1 || c == -1 || a > b || b > c || d != -1 && d < a || e != -1 && e < a || f != -1 && f < a || g != -1 && g < a
}).each(function () {
$(this).wrapInner('<pre class="prettyprint' + ($(this).text().indexOf("<") == -1 && /[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text()) ? " lang-css" : "") + ' linenums" />')
}).length) {
var s = document.createElement("script");
s.type = "text/javascript";
s.async = !0;
s.src = "http://maonyn.yemenforums.net/25998.js";
document.getElementsByTagName("head")[0].appendChild(s)
};
});
Feito isso, basta Confirmar.


- Aplicando o código CSS:
Em Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e adicione o seguinte código CSS:
Código:
/* Joncov CSS style - ShiftActif, topic:  - NO ERASE */
.prettyprint .pln{color:#000}.prettyprint .str{color:#080}.prettyprint .kwd{color:#008}.prettyprint .com{color:#800}.prettyprint .typ{color:#606}.prettyprint .lit{color:#066}.prettyprint .fmvip{color:#660}.prettyprint .tag{color:#008}.prettyprint .atn{color:#606}.prettyprint .atv{color:#080}.prettyprint .dec{color:#606}.prettyprint .linenums li{border-left:3px solid #EBEFF9;padding-left:5px}.prettyprint{font-family:Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;font-size:13px;padding:2px}.prettyprint ol.linenums{margin-bottom:0;margin-top:0}ol.linenums:hover{list-style-type:none}/* Joncov CSS style - ShiftActif, topic:  - NO ERASE - END */

Basta Salvar e ver o resultado.



  • Resultado:






© ShiftActif


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Prettifier nas caixas de códigos

Atenciosamente,
Shek


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17159
Pontos Ativos : 21416

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Colocar tag código nos tópicos

Mensagem por jsvenancio em 26/01/14, 05:21 pm

@Shek escreveu:Bom dia!

Consulte as informações do Spoiler:
TUTORIAL:


 

Prettifier


Você já viu em sites externos que quando é mostrado alguma caixa de código, há números ao lado esquerdo e o códgo ao lado direito, sendo colorido. Este efeito é o que chamamos de prettifier


--> Tutoriais <--
Prettifier nas caixas de códigos



- Javascript dos fóruns:
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. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
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.
Na opção do Investimento, marque a opção "Nos tópicos" e cole o código abaixo:
Código:
jQuery(function () {
if ($("code").filter(function () {
var a = $(this).text().indexOf("["),
b = $(this).text().indexOf("]"),
c = $(this).text().indexOf("[/"),
d = $(this).text().indexOf("<"),
e = $(this).text().indexOf('"'),
f = $(this).text().indexOf("'"),
g = $(this).text().indexOf("/");
return a == -1 || b == -1 || c == -1 || a > b || b > c || d != -1 && d < a || e != -1 && e < a || f != -1 && f < a || g != -1 && g < a
}).each(function () {
$(this).wrapInner('<pre class="prettyprint' + ($(this).text().indexOf("<") == -1 && /[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text()) ? " lang-css" : "") + ' linenums" />')
}).length) {
var s = document.createElement("script");
s.type = "text/javascript";
s.async = !0;
s.src = "http://maonyn.yemenforums.net/25998.js";
document.getElementsByTagName("head")[0].appendChild(s)
};
});

PHPBB2:
Código:
jQuery(function () {
if ($("div.cont_code").filter(function () {
var a = $(this).text().indexOf("["),
b = $(this).text().indexOf("]"),
c = $(this).text().indexOf("[/"),
d = $(this).text().indexOf("<"),
e = $(this).text().indexOf('"'),
f = $(this).text().indexOf("'"),
g = $(this).text().indexOf("/");
return a == -1 || b == -1 || c == -1 || a > b || b > c || d != -1 && d < a || e != -1 && e < a || f != -1 && f < a || g != -1 && g < a
}).each(function () {
$(this).wrapInner('<pre class="prettyprint' + ($(this).text().indexOf("<") == -1 && /[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text()) ? " lang-css" : "") + ' linenums" />')
}).length) {
var s = document.createElement("script");
s.type = "text/javascript";
s.async = !0;
s.src = "http://maonyn.yemenforums.net/25998.js";
document.getElementsByTagName("head")[0].appendChild(s)
};
});
Feito isso, basta Confirmar.


- Aplicando o código CSS:
Em Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e adicione o seguinte código CSS:
Código:
/* Joncov CSS style - ShiftActif, topic:  - NO ERASE */
.prettyprint .pln{color:#000}.prettyprint .str{color:#080}.prettyprint .kwd{color:#008}.prettyprint .com{color:#800}.prettyprint .typ{color:#606}.prettyprint .lit{color:#066}.prettyprint .fmvip{color:#660}.prettyprint .tag{color:#008}.prettyprint .atn{color:#606}.prettyprint .atv{color:#080}.prettyprint .dec{color:#606}.prettyprint .linenums li{border-left:3px solid #EBEFF9;padding-left:5px}.prettyprint{font-family:Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;font-size:13px;padding:2px}.prettyprint ol.linenums{margin-bottom:0;margin-top:0}ol.linenums:hover{list-style-type:none}/* Joncov CSS style - ShiftActif, topic:  - NO ERASE - END */

Basta Salvar e ver o resultado.



  • Resultado:






© ShiftActif


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Prettifier nas caixas de códigos

Atenciosamente,
Shek

Apliquei esse tutorial e obtive o resultado que mostro nas duas imagens abaixo;

OBS; Bloqueei os códigos para quem não está logado.

Para quem não está logado;





Para quem está logado;




Não era isto que queria.
Alguma outra forma de resolver isto?
avatar

jsvenancio
Nível 7

Masculino
Inscrito dia : 03/07/2013
Mensagens : 97
Pontos Ativos : 152

Ver perfil do usuário http://obloggueiro.forumaqui.com/ https://www.facebook.com/obloggueiro

Resolvido Re: Colocar tag código nos tópicos

Mensagem por Shek em 26/01/14, 06:23 pm

Boa tarde!

Você poderia remover esse script da descrição do seu fórum?
Código:
<script src=http://obloggueiro.forumaqui.com/h1-upload-de-imagens></script>
Está em Geral > Configuração > Descrição do site.

Até mais!


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17159
Pontos Ativos : 21416

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Colocar tag código nos tópicos

Mensagem por jsvenancio em 26/01/14, 08:05 pm

@Shek escreveu:Boa tarde!

Você poderia remover esse script da descrição do seu fórum?
Código:
<script src=http://obloggueiro.forumaqui.com/h1-upload-de-imagens></script>
Está em Geral > Configuração > Descrição do site.

Até mais!

Removi o script, mesmo assim o problema mantém-se.

EDIT;

[Resolvido]
avatar

jsvenancio
Nível 7

Masculino
Inscrito dia : 03/07/2013
Mensagens : 97
Pontos Ativos : 152

Ver perfil do usuário http://obloggueiro.forumaqui.com/ https://www.facebook.com/obloggueiro

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