Para escrever a respeito de algoritmos é necessário, melhor dizendo, é desejável que o código-fonte esteja legível, que seja possível distinguir visualmente as palavras reservadas, os comentários, etc. Os ambientes de desenvolvimento, tais como NetBeans, VisualStudio, PyCharm, entre outros, oferecem ótimos recursos relacionados à legibilidade do código-fonte. Porém, para publicar trechos de algoritmos em páginas html essa busca pela clareza é mais difícil. O trecho de código descrito abaixo não está ruim, do ponto de vista da formatação, mas quem conhece programação sabe que poderia ser melhor.
class Area{
public static void main(String args[]){
double pi, r, a;
r = 10.8;
pi = 3.1416;
a = pi * r * r;
System.out.println("Area do círculo é " + a);
}
}
Esse mesmo algoritmo pode ser exibido de uma maneira muito mais legível, observe-se o trecho de código abaixo, as palavras reservadas estão em destaque, o espaçamento entre as letras é maior, há a diferenciação dos valores literais e ainda o indicador de número da linha.
class Area{
public static void main(String args[]){
double pi, r, a;
r = 10.8;
pi = 3.1416;
a = pi * r * r;
System.out.println("Area do círculo é " + a);
}
}
Esse mesmo algoritmo pode ser exibido de uma maneira muito mais legível, observe-se o trecho de código abaixo, as palavras reservadas estão em destaque, o espaçamento entre as letras é maior, há a diferenciação dos valores literais e ainda o indicador de número da linha.
class Area{ public static void main(String args[]){ double pi, r, a; r = 10.8; pi = 3.1416; a = pi * r * r; System.out.println("Area do círculo é " + a); } }
Para realizar essa excelente formatação foi empregada a biblioteca SyntaxHighlighter desenvolvida por Alex Gorbatchev. Trata-se de uma biblioteca JavaScript para formatar e realçar código-fonte, ela reconhece códigos das linguagens C++, C#, CSS, Java, JavaScript, PHP, Python, Ruby, SQL, VisualBasic, XML, HTML e Perl. Para utilizar essa biblioteca é necessário incluir os códigos abaixo entre as tags head da página html.
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <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 language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
Na sequência, os trechos de texto que contém código-fonte devem ser circundados pelas tags pre (conforme ilustrado no trecho a seguir), informando alguma das opções de linguagem disponíveis. No exemplo ilustrado estamos formatando código html. Mais informações e detalhes de utilização podem ser encontrados no site do desenvolvedor.
código fonte