Como inserir código fonte no seu blog com o tema do Eclipse

Ops você não conseguiu ver esta imagem, não fique triste porque eu expliquei tudinho em texto... Obrigado


Olá, eu este artigo será bem rapidinho, achei bem interessante, por isso resolvi escrever pra você.

Eu sou daqueles que quando consigo algo novo para o meu blog fico doido para compartilhar a dica e mostrar pra todo mundo com é que faz. E neste caso não é diferente.

Comecei a postar conteúdo de programação, e provavelmente farei vários posts com códigos fonte. Então procurei várias formas de mostrar os códigos de maneira mais organizada e bonita.

Encontrei este método que acrescenta o código com linhas numeradas bem parecido com o Eclipse (para quem não conhece é um ambiente para programar em Java) e gostei muito, veja aqui o resultado.

Como Fazer

Primeiro acesse a HTML do seu blog, para quem ainda não sabe o caminho basta clicar em Modelo e depois em Editar HTML.

Agora procure pela Tag </HTML>  e acima dela cole o código a seguir:


<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>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Agora está fácil, todas as vezes que quiser que um trecho fique com o visual de código fonte, basta clicar no botão HTML quando estiver escrevendo e depois acrescentar os comandos abaixo antes e depois do trecho, veja no exemplo:

<script type="syntaxhighlighter" class="brush: html"><![CDATA[

Aqui você digita seu código

]]></script>


Veja como ficará o exemplo acima:

Legal né?! O mais legal é que você poderá substituir o HTML na linha <script type="syntaxhighlighter" class="brush: html"><![CDATA[  por qualquer outra linguagem da lista:

  • ActionScript3
  • Bash/shell
  • ColdFusion
  • C#
  • C++
  • CSS
  • Delphi
  • Diff
  • Erlang
  • Groovy
  • JavaScript
  • Java
  • JavaFX
  • Perl
  • PHP
  • Plain Text
  • PowerShell
  • Python
  • Ruby
  • Scala
  • SQL
  • Visual Basic
  • XML
E aí gostou? Deixe seu comentário e veja mais tutoriais para melhorar ainda mais seu blog, e assim bombar nas visualizações...

Um grande abraço e até a próxima...
SHARE

Alexandre Santos

Eu sou Alexandre Santos, graduado em Sistemas de Informação pela Faculdade Pitágoras, e professor a mais de 8 anos. Me aventurando como blogueiro afinal conhecimento só é útil quando compartilhado.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 comentários:

Postar um comentário