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/
  • ¿Qué te pareció?

    Loading...
    Nombre

    Adblock Adobe Flash AJAX Algoritmos Anuncios API Blogger Blogging Buscadores chrome web store Código Fuente CSS CSS 3 CV Dart Depurar Desarrollo Web Diseño Diseño Grafico Diseño Web Documentación Efectos Facebook Firefox Foros Fotografias Frances Bean Cobain Gadgets General Geolocalizar Google Google Analytics Google Chrome Google Imágenes Google Music Google Reader Google+ Herramientas Hotmail HTML HTML5 Imágenes Información Informática Instagram Internet Internet Explorer Internet Explorer 10 Javascript jQuery Kurt Cobain Librerías Marketing Microsoft Monetización Web Mozilla Firefox 8 MySQL Navegadores Noticias Optimización Web PageSpeed Insights PayPal Personal Photoshop PHP Plantillas Programación Programas Programas Web Proyectos Redes Sociales ScreensHots Scripts Seguridad SEO Servicios Web Sesiones Snippets SoniTube Spam Steve Jobs Templates Themes Thumbalizr Tips Trucos Tutoriales Twitter Utilidades Vectores Virus Web Widgets Windows 7 Windows 8 Windows Mobile Windows XP WordPress XSS Youtube
    false
    ltr
    item
    OnSoni: Añadir código fuente en Blogger
    Añadir código fuente en Blogger
    OnSoni
    http://www.onsoni.com/2011/10/anadir-codigo-fuente-en-blogger.html
    http://www.onsoni.com/
    http://www.onsoni.com/
    http://www.onsoni.com/2011/10/anadir-codigo-fuente-en-blogger.html
    true
    8818836675902573334
    UTF-8
    Not found any posts Not found any related posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU Etiqueta ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Contents Ver también Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copiar todo el codigo Seleccionar todo el Código Todo el código se ha copiado en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy