Syntax Highlighter v1.07 |
Créditos: https://github.com/balupton/jquery-syntaxhighlighter Nota: Versão release, fase de implementação. Código implementado por JScript! |
1º - 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 <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></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>
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;
}
Link para visualização: http://jscript.forumeiros.com/
Nota: O código está otimizado para um carregamento mais rápido!!!
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)