Mario Cezzare's Blog: Como adicionar SyntaxHighlighter em suas páginas ou blog

Olá, neste post vou demonstrar um jeito de adicionar o componente Javascript SyntaxHighlighter ()

Basta adicionar o seguinte código entre as suas tags <head></head> , ou diretamente no código html do Post

parte 1

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
</script>

parte 2

os itens em vermelho estão sendo utilizados nesse exemplo

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript">
</script>

parte 3

<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

parte 4

utilizando :

Para o código aparecer formatado coloque entre as tags <pre> passando o estilo desejado para o trecho :

exemplos :

<pre class="brush: java">texto puro</pre>

//hello.java
class hello{
 public static void main(String[] args){
  System.out.println("Hello");
 }
}

<pre class="brush: shell">texto puro</pre>

#!/bin/sh
var="hello"
echo $var;

<pre class="brush: sql">texto puro</pre>

Select CL.*,C.nome as cidade,E.nome as estado 
from cliente CL left join estado E on (CL.estado_id = E.id) 
left join  cidade C on (CL.cidade_id=C.id ) WHERE CL.nome like '%Jose%'

<pre class="brush: js">texto puro</pre>

// JavaScript Document
function checknull(field){
 if (field.length==0 || field=="" || field==0){
  return true;
  }
 else {
  return false;
  }
}

function checkMail(mail){
        var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
        if(typeof(mail) == "string"){
                if(er.test(mail)){ return true; }
        }else if(typeof(mail) == "object"){
                if(er.test(mail.value)){ 
                                        return true; 
                                }
        }else{
                return false;
                }
}

<pre class="brush: php">texto puro</pre>


/**
 *   Description of Teste
 * * @author mcezzare@gmail.com
 * apenas p/ colocar no blog, exemplo SyntaxHighLighter
 */
class Teste {
    
    public function Teste(){}

    public function soma($a,$b){
        return ($a+$b);
    }
    
}
 
$t = new Teste();
$soma = $t->soma(20457.456, 30764.6543);
echo number_format($soma, '2', ',','.');

se não rodar o php

Mario Cezzare's Blog

quinta-feira, 12 de julho de 2012

Como adicionar SyntaxHighlighter em suas páginas ou blog

Um comentário: