Visualizando código fonte com SyntaxHighlighter

Já havia visto em vários blogs, o código de alguns programas bem formatado, com realce de cores, etc. Resolvi ir atrás e descobri que foram feitos utilizando a biblioteca SyntaxHighlighter. Se você quiser utilizá-lo em seu blog siga o roteiro abaixo.

1. Entre em Layout > Editar HTML e insira o seguinte código logo acima da tag </HEAD>
:

<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css" rel="stylesheet" type="text/css"> 
<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" rel="stylesheet" type="text/css"> 
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js" type="text/javascript">
 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDelphi.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>



2. Quando você quiser utilizar o SyntaxHighlighter, basta colocar o seu código entre as tags <pre>, por exemplo, o código:

<pre class="brush: delphi">
// coloque seu código aqui
x := 1;
if (x > 0) then begin
ShowMessage('X é maior que 0');
Halt;
end;
</pre>

Será mostrado assim:

// coloque seu código aqui
x := 1;
if (x > 0) then begin
ShowMessage('X é maior que 0');
Halt;
end;

Comentários

Postagens mais visitadas deste blog

Como aprender a programar

Netflix não mostra ícone de streaming

Google Hacking