Añadir código fuente en Blogger

Voy a explicarles unos métodos para añadir código fuente mostrando la sintaxis según el lenguaje efectivamente en blogger de manera sencilla y eficaz.

1. SyntaxHighlighter

SyntaxHighlighter es una librería Javascript que permite a los desarrolladores publicar código fuente mostrando la sintaxis según el lenguaje de manera sencilla y con excelente apariencia. Esta librería esta desarrollada 100% en Javascript y no necesita ningún lenguaje de servidor para su funcionamiento.

Lenguajes soportados

Esta librería posee una serie de lenguajes soportados para ser resaltados de forma automática, a continuación mostramos la lista de lenguajes y los alias que se pueden utilizar para definir el lenguaje para el resaltado:

• C++: cpp, c, c++
• C#: c#, c-sharp, csharp
• CSS: css
• Delphi: delphi, pascal
• Java: java
• JavaScript: js, jscript, javascript
• PHP: php
• Python: py, python
• Ruby: rb, ruby, rails, ror
• SQL: sql
• VB: vb, vb.net
• XML/HTML: xml, html, xhtml, xslt

Utilizando SyntaxHighlighter

Dicho esto, aquí están los pasos que hemos seguido para hacer el trabajo resaltado de sintaxis con Blogger (el anfitrión de este blog), utilizando la suite de SyntaxHighlighter de código JavaScript y CSS. En la parte final blogger (accesible por acceder a su blog y hacer clic en "Nuevo" o "Personalizar", u otros métodos), haga clic en la pestaña "Diseño", la "Edición de HTML" sub-pestaña. En el cuadro de texto dentro de la "Plantilla Edit", haga lo siguiente:

1. Ir a la siguiente dirección: http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css , a continuación, "seleccionar todo" y "copia". La información de la CSS se encuentra ahora en el enlace.

2. Pegar la información al final de la sección de CSS de su plantilla de blogger html (es decir, después de <b:skin>).

3. El código debe ser introducido [antes de la etiqueta de cierre guión], que es la siguiente: </b:skin>.

4. Ahora deberás añadir el código Javascript que necesitaremos para generar e introducir cada etiqueta de código con su lenguaje determinado:

[<!-- Add-in CSS for syntax highlighting --> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>]

Añada este código después de la etiqueta </b:skin> y antes de </head> en su plantilla de blogger

Nota: No dude en eliminar las líneas de lenguajes que nunca vamos a usar (por ejemplo, Delphi) - se ahorrará algo de tiempo de carga el blog.

5. [Después de añadir el Código CSS y el Código Javascript que ya proporcione] debes añadir Antes de la etiqueta </body>, el siguiente código:

[<!-- Add-in Script for syntax highlighting --> <script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>]

6. Utilice el botón "Preview" para asegurarse de que su sitio web es correcto, haga clic en "Guardar plantilla".

7. Al redactar una entrada de blog que contiene el código fuente, haga clic en "Edición de HTML" ficha y poner su código fuente (con html caracteres de escape) entre estos tags:

[<pre name="code" class="cpp"> Código html que quieras insertar </pre>]

Sustituir "cpp" con el idioma que estás usando (lista completa). (Opciones: cpp, c, c + +, C #, C-sharp, csharp, css, delphi, pascal, java, js, JScript, JavaScript, PHP, py, python, rb, Ruby, Rails, ROR, SQL, VB, VB . nET, XML, HTML, XHTML, XSLT)
Para llevar a cabo el escape de HTML, usted puede conseguir una buena lista de herramientas de búsqueda de 'html esaper "o un término similar. Aquí está la que utiliza al escribir este post.

¡Déjame saber cómo funciona!

notas:

El paso 2 es una solución temporal para acomodar a los navegadores Firefox, que por alguna razón se niegan a cargar el css cuando estén vinculados, ya que piensa que el tipo se mime / plain en vez de la pantomima / css (yo personalmente no entiendo esto - "sólo estoy usando una solución recomendada de otros lugares) Consulte la documentación completa aquí para SyntaxHighlighter.

2.Online syntax highlighting
También puedes encontrar este método de manera online Online syntax highlighting.

Lenguajes soportados

including C#

Java

PHP

Basic

Perl

Python

Pascal

SQL

JavaScript

Accede atravez de: http://tohtml.com/php/, recomiendo totalmente la herramienta online, espero a verles podido aportar un granito de arena con este artículo, saludos.

Más Información

http://blog.unijimpe.net/syntaxhighlighter/