inicio mail me! foro sindicaci;ón

¿Necesitas poner código en tus post? Plugin iG:Syntax Hiliter V 3.5

April 17, 2006 a las 7:56 am · Archivado en Desarrollador, Plugins, Tutoriales, WordPress

Desde ayer anduve buscando algo que me permitiera poner codigo en mis post y después de una ardua busqueda por fin dí con éste increíble plugin que aunque ésta versión fué liberada desde el 25 de Febrero, a muchos les vá a facilitar la vida :).

Con él puedes postear codigo ActionScript, ASP, C, C++, C#, CSS, DELPHI, HTML, JAVA, JavaScript, MySQL, PERL, PHP, PYTHON, RUBY, SMARTY, SQL, Visual Basic, VB.NET, XML & CODE.

Para hacerlo funcionar es necesario seguir los siguientes pasos:
Instalación:

Pimero lo obvio, hay que descargar el plugin, lo puedes hacer desde aquí: [ descargar ] o ir directamente al sitio de su creador

Luego, hay que descomprimir el archivo iG_Syntax_Hiliter.zip, una vez que descomprimes el archivo .zip te generará una carpeta "iG-Syntax Hiliter"
iG-Syntax Hiliter Folder
dentro de la que encontrarás los siguientes archivos:
Plugin, licencia y manual

La Carpeta llamada "ig_syntax hiliter plugin" es la que hay que subir al sitio y colocarla en el directorio "../wp-content/plugins/".

El siguiente paso es entrar a tu panel de administración de WordPress y activar el plugin.
Ahora hay que configurar el plugin.
Configuración:

A continuación tienes que ir a tu panel de administración de WordPress y seleccionando la ceja "Opciones" te aparecerá ya la ceja "IG:Syntax Hiliter".

Y al seleccionar dicha ceja te aparecerán las siguientes opciones:

1.- Show Plain Text Code Option:

Esta opción te sirve para mostrar un botón "PLAIN TEXT" o para no mostrarlo.

SyntaxHiliterOpcion01

2.- Show Plain Text Code In:

En caso de elegir (en la opción No. 1) que si muestre el botón "PLAIN TEXT" tienes la opción de que al presionarlo te muestre texto plano dentro de la misma ventana o en una ventana nueva (popup) como se vé en la siguiente imágen.

SyntaxHiliterOpcion02

3.- Show Language Name:

Esta opción es para que muestre el tipo de lenguaje o no.

SyntaxHiliterOpcion03

4.- Hilite Code in Comments:

Aquí eliges si quieres mostrar codigo o no en los comentarios.

5.- Show Line Numbers:

Esta opción es para mostrar o no el número de línea

6.- Show Fancy Line Numbers:

Aquí eliges si quieres mostrar el número de línea intercalando 2 colores o de uno sólo para todas las líneas.

7.- Creo que aquí ya no necesita explicación :D

8.- Igual que el 7 :D

Bueno, ya casi estamos listos, pero todavía falta un paso muy importante.
Para hacernos la vida más fácil, el creador del plugin todavía nos tiene reservada una sorpresa más, y es como implementar los QuickTags.

Ok, abre el archivo quicktags.js que se encuentra en el directorio "wp-includes/js/", con cualquier editor de texto.

Ahí encontrarás en la línea # 126 lo siguiente:

PLAIN TEXT
JavaScript:
  1. edButtons[edButtons.length] =
  2. new edButton('ed_more'
  3. ,'more'
  4. ,'<span id="more-32"></span>'
  5. ,''
  6. ,'t'
  7. ,-1
  8. );

En seguida agrega el siguiente código:

PLAIN TEXT
JavaScript:
  1. //----- Start iG:Syntax Hiliter Plugin's Quick Tags -----
  2.  
  3. edButtons[edButtons.length] =
  4. new edButton('ed_shAS'
  5. ,'ActionScript'
  6. ,'[as]'
  7. ,'[/as]'
  8. ,''
  9. );
  10.  
  11. edButtons[edButtons.length] =
  12. new edButton('ed_shASP'
  13. ,'ASP'
  14. ,'[asp]'
  15. ,'[/asp]'
  16. ,''
  17. );
  18.  
  19. edButtons[edButtons.length] =
  20. new edButton('ed_shC'
  21. ,'C'
  22. ,'[c]'
  23. ,'[/c]'
  24. ,''
  25. );
  26.  
  27. edButtons[edButtons.length] =
  28. new edButton('ed_shCPP'
  29. ,'C++'
  30. ,'[cpp]'
  31. ,'[/cpp]'
  32. ,''
  33. );
  34.  
  35. edButtons[edButtons.length] =
  36. new edButton('ed_shCSHARP'
  37. ,'C#'
  38. ,'[csharp]'
  39. ,'[/csharp]'
  40. ,''
  41. );
  42.  
  43. edButtons[edButtons.length] =
  44. new edButton('ed_shCSS'
  45. ,'CSS'
  46. ,'[css]'
  47. ,'[/css]'
  48. ,''
  49. );
  50.  
  51. edButtons[edButtons.length] =
  52. new edButton('ed_shDELPHI'
  53. ,'DELPHI'
  54. ,'[delphi]'
  55. ,'[/delphi]'
  56. ,''
  57. );
  58.  
  59. edButtons[edButtons.length] =
  60. new edButton('ed_shHTML'
  61. ,'HTML'
  62. ,'[html]'
  63. ,'[/html]'
  64. ,''
  65. );
  66.  
  67. edButtons[edButtons.length] =
  68. new edButton('ed_shJAVA'
  69. ,'JAVA'
  70. ,'[java]'
  71. ,'[/java]'
  72. ,''
  73. );
  74.  
  75. edButtons[edButtons.length] =
  76. new edButton('ed_shJS'
  77. ,'JavaScript'
  78. ,'[ js ]'
  79. ,'[ / js ]'
  80. ,''
  81. );
  82.  
  83. edButtons[edButtons.length] =
  84. new edButton('ed_shMySQL'
  85. ,'MySQL'
  86. ,'[mysql]'
  87. ,'[/mysql]'
  88. ,''
  89. );
  90.  
  91. edButtons[edButtons.length] =
  92. new edButton('ed_shPERL'
  93. ,'PERL'
  94. ,'[perl]'
  95. ,'[/perl]'
  96. ,''
  97. );
  98.  
  99. edButtons[edButtons.length] =
  100. new edButton('ed_shPHP'
  101. ,'PHP'
  102. ,'[php]'
  103. ,'[/php]'
  104. ,''
  105. );
  106.  
  107. edButtons[edButtons.length] =
  108. new edButton('ed_shPYTHON'
  109. ,'PYTHON'
  110. ,'[python]'
  111. ,'[/python]'
  112. ,''
  113. );
  114.  
  115. edButtons[edButtons.length] =
  116. new edButton('ed_shRuby'
  117. ,'RUBY'
  118. ,'[ruby]'
  119. ,'[/ruby]'
  120. ,''
  121. );
  122.  
  123. edButtons[edButtons.length] =
  124. new edButton('ed_shSMARTY'
  125. ,'SMARTY'
  126. ,'[smarty]'
  127. ,'[/smarty]'
  128. ,''
  129. );
  130.  
  131. edButtons[edButtons.length] =
  132. new edButton('ed_shSQL'
  133. ,'SQL'
  134. ,'[sql]'
  135. ,'[/sql]'
  136. ,''
  137. );
  138.  
  139. edButtons[edButtons.length] =
  140. new edButton('ed_shVB'
  141. ,'Visual Basic'
  142. ,'[vb]'
  143. ,'[/vb]'
  144. ,''
  145. );
  146.  
  147. edButtons[edButtons.length] =
  148. new edButton('ed_shVBNET'
  149. ,'VB.NET'
  150. ,'[vbnet]'
  151. ,'[/vbnet]'
  152. ,''
  153. );
  154.  
  155. edButtons[edButtons.length] =
  156. new edButton('ed_shXML'
  157. ,'XML'
  158. ,'[xml]'
  159. ,'[/xml]'
  160. ,''
  161. );
  162.  
  163. edButtons[edButtons.length] =
  164. new edButton('ed_shCode'
  165. ,'CODE'
  166. ,'[code]'
  167. ,'[/code]'
  168. ,''
  169. );
  170. //----- End iG:Syntax Hiliter Plugin's Quick Tags -----

Guarda el archivo y súbelo al sitio de nuevo.

Ahora ya tienes 21 nuevos botones en tu editor con éstos nombres:
ActionScript, ASP, C, C++, C#, CSS, DELPHI, HTML, JAVA, JavaScript, MySQL, PERL, PHP, PYTHON, RUBY, SMARTY, SQL, Visual Basic, VB.NET, XML & CODE que te generarán sus respectivas etiquetas.

En mi caso sólo puse 9.

Nuevos botones :D

Nota: En el archivo .zip viene incluido éste mismo manual en inglés, espero que le sirva a alguien.

Ahora si a disfrutar de éste útil plugin.

Y bueno, aquí una muestra de lo que hace:

PHP

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. // ** MySQL settings ** //
  4.  
  5. define ( 'DB_NAME'     , 'tuBaseDeDatos'   ) ; // The name of the database
  6. define ( 'DB_USER'     , 'tuUserName' ) ; // Your MySQL username
  7. define ( 'DB_PASSWORD' , 'tuPassword' ) ; // ...and password
  8. define ( 'DB_HOST'     , 'localhost' ) ; // 99% chance you won't need to change this value
  9.  
  10. // Change the prefix if you want to have multiple blogs in a single database.
  11. $table_prefix  = 'wp_';   // example: 'wp_' or 'b2' or 'mylogin_'
  12.  
  13. // Change this to localize WordPress.  A corresponding MO file for the
  14. // chosen language must be installed to wp-includes/languages.
  15. // For example, install de.mo to wp-includes/languages and set WPLANG to 'de'
  16. // to enable German language support.
  17. define ('WPLANG', 'es_ES');
  18.  
  19. /* Stop editing */
  20.  
  21. define('ABSPATH', dirname(__FILE__).'/');
  22. require_once(ABSPATH.'wp-settings.php');
  23. ?>

CSS

PLAIN TEXT
CSS:
  1. /*
  2. Theme Name: Abstrakt
  3. Theme URI: http://www.kaushaheth.com/
  4. Description: Modified WheatGrass Theme featuring Top Level Menu and Side Level Menu
  5. Version: 1.0
  6. Author: Kaushal Sheth
  7. Author URI: http://www.kaushalsheth.com/
  9. The CSS, XHTML and design is released under GPL:
  10. http://www.opensource.org/licenses/gpl-license.php
  12. Tweak this CSS howsoever you will.
  14. *** REGARDING IMAGES ***
  15. All CSS that involves the use of images, can be found in the 'index.php' file.
  16. This is to ease installation inside subdirectories of a server.
  18. CSS SECTIONS IN ORDER (use your program's bookmarking or find functions to quickly locate):
  19. Sidebar, Posts, Headings, Images, Forms, Comments, Content Area, Footer
  21. */
  22.  
  23. /* Sidebar */
  24.  
  25. #sidebar h2 {
  26. font-family: Georgia, Serif;
  27. font-size: 1.2em;
  28. margin: 15px 0 10px 0;
  29. padding: 0;
  30. }
  31.  
  32. #sidebar {
  33. padding: 20px 0 10px 0;
  34. margin-left: 545px;
  35. width: 190px;
  36. font: 1.2em Verdana, Arial, Sans-Serif;
  37. color: #000;
  38. }
  39.  
  40. .page_item {
  41. font-weight: bold;
  42. font-size: 140%;
  43. }
  44.  
  45. .page_item a:hover {
  46. text-decoration: none;
  47. }
  48.  
  49. .page item current_page_item {
  50. color: #000;
  51. }

Javascript

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2. <div id="flashcontent">Aquí puedes colocar la cosa alternativa que saldrá si no hay Flash Player</div>
  3. </script><script type="text/javascript">
  4. var pelicula = new FlashObject("pelicula.swf", "pelicula", "200", "100", "7", "#336699");
  5. fo.write("flashcontent");
  6. </script>

Actionscript

PLAIN TEXT
Actionscript:
  1. /* Esta es una variable que nos permitirá saber si ya iniciamos el código del loop
  2. infinito para impedir repetición de loops */
  3. if (noRepeat == undefined) {
  4. //Aqui la declaramos para que no vuelva a ser "undefined" y este código se ejecute
  5. //una vez aunque la línea de tiempo vuelva a este KeyFrame
  6. var noRepeat:Number;
  7. noRepeat = 1;
  8. //Creamos una nueva variable de tipo sonido
  9. var sonido:Sound = new Sound();
  10. //Le adjuntamos el sonido que declaramos en la librería como "sonidillo"
  11. sonido.attachSound("sonidillo");
  12. //Le decimos, que si el sonido ya se termino de ejecutar
  13. sonido.onSoundComplete = function() {
  14. //Vuelva a arrancarlo
  15. this.start();
  16. };
  17. //Iniciamos el sonido
  18. sonido.start();
  19. }

Patrocinadores:
tarot

View blog reactions

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • meneame
  • BlinkList
  • blogmarks
  • co.mments
  • connotea
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Netvouz
  • RawSugar
  • Reddit
  • scuttle
  • Shadows
  • Simpy
  • Smarking
  • Spurl
  • TailRank
  • Wists
  • YahooMyWeb

31 Comentarios »

Gravatar

LA100RRA dijo,

April 17, 2006 @ 6:16 pm

Uff!
Finalmente terminé éste post :P

Gravatar

neojp dijo,

April 17, 2006 @ 8:34 pm

No me gusta como se ve en el Editor, preferiria un combobox con las opciones como en Jaws, pero.. en fin o.O

Me gusta el coso con numeración o.o

Gravatar

» ¿Necesitas poner código en tus post? Plugin iG:Syntax Hiliter V 3.5 dijo,

April 17, 2006 @ 10:09 pm

[…] Excelente herramienta mostrada en WordPress Maniac. […]

Gravatar

Ramon dijo,

April 18, 2006 @ 2:42 am

Tiene buena pinta, a ver si lo instalo ;)

Gravatar

meneame.net dijo,

April 18, 2006 @ 3:53 am

Excelente Tutorial de instalacion de plugin para postear codigo en tu blog…

Pues es primero que nada un plugin para wordpress que te permite poner codigo en tus artículos, y se explica detalladamente paso a paso como se debe instalar.
Incluye imágenes y tal, de forma que no hay manera de fallar, de verdad que no tiene despe…

Gravatar

AkUzZeR dijo,

April 18, 2006 @ 5:40 pm

Warning: main(/home/visionur/public_html/akuzzer/blog/wp-content/plugins/ig_syntax_hilite/geshi.php) [function.main]: failed to open stream: No such file or directory in /home/visionur/public_html/akuzzer/blog/wp-content/plugins/ig_syntax hiliter plugin/syntax_hilite.php on line 31

Fatal error: main() [function.require]: Failed opening required ‘/home/visionur/public_html/akuzzer/blog/wp-content/plugins/ig_syntax_hilite/geshi.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/visionur/public_html/akuzzer/blog/wp-content/plugins/ig_syntax hiliter plugin/syntax_hilite.php on line 31

Mira…ese error es el que me sale al activarlo, no sabes xq sale?

Gravatar

AkUzZeR dijo,

April 18, 2006 @ 5:49 pm

Ya vi cual era el problema, dentro del archivo syntax_hilite.php en la línea número 31 estaba mal el directorio solamente se cambia…y bueno de antemano agradezco el q te hayas molestado el enviarme el correo avisándome gracias!

Gravatar

AkUzZeR dijo,

April 18, 2006 @ 6:18 pm

chale..ahora no me salen los botonsitos..xD tengo q desactivar algo? o q px

Gravatar

LA100RRA dijo,

April 18, 2006 @ 6:22 pm

Imagino que tienes activada la opción “Utilizar el editor visual para escribir“, vé a tu perfil de usuario y desactívala, es todo U_U

:D

Gravatar

Memorias inconclusas » Blog Archive » Plugins para Wordpress dijo,

May 1, 2006 @ 11:31 am

[…] Actualizacion: Agregue el plugin iG:Syntax Hiliter v3.5 para poder desplegar código en los “posts”, como se puede ver aquí arriba. Use este tutorial como base. […]

Gravatar

blog.elportafolios.net dijo,

May 14, 2006 @ 12:14 pm

[…] PD: Artículo desarrollado a partir de otro publicado en http://qwilm.la100rra.com.mx el 17 de Abril del 2006. […]

Gravatar

Aoyama dijo,

May 16, 2006 @ 5:07 pm

No sé si les paso, pero yo tuve que copiar el directorio que está adentro de la carpeta ig sintax_hiilter plugin en lugar de está última para que funcionará

Gravatar

Las Noyas de Taran dijo,

June 21, 2006 @ 5:05 am

[…] iG:Syntax Highlighter: Para colorear y resaltar el código fuente en multitud de lenguajes, espero darle mucho uso a partir de verano. Aunque seguí un buen tutorial en WordPress Maniac! tuve que editar a mano un archivo para que funcionara… Además permite colorear código en los comentarios, supongo que poniendo las marcas adecuadas, claro. Generalmente son el lenguaje entre corchetes, y con la barra delante para cerrar, como es habitual Para probar pongo el ejemplo que aparece en la Wikipedia de Python, a ver qué tal. [python]# -*- coding: iso8859-15 -*- import sys […]

Gravatar

WordPress Maniac! » dijo,

July 14, 2006 @ 3:20 pm

[…] De modo que con lo aprendido en la instalación del plugin iG:Syntax Hiliter V3.5 decidí agregar los QuickTags correspondientes, así ya no hay pretexto […]

Gravatar

Agregando Quicktags para ayudar a hacer post semánticos. « LA100RRA Blog dijo,

September 5, 2006 @ 7:59 pm

[…] De modo que con lo aprendido en la instalación del plugin iG:Syntax Hiliter V3.5 decidí agregar los QuickTags correspondientes, así ya no hay pretexto […]

Gravatar

@lffa Blog » Trabajando con cadenas … dijo,

September 27, 2006 @ 9:37 pm

[…] bueno es todo … en las funciones principales de php esta el link a http://www.php.net donde esta la explicacion de cada una de ellas … este plugin es buenisimo xD […]

Gravatar

Nuevo plugin para WordPress que permite publicar codigo en colores! at .: WEREMSOFT :. dijo,

October 16, 2006 @ 12:28 pm

[…] Gracias a la la100ra nos llega este tutorial que nos explica como instalar el plugin para wordpress para resaltar código. Así, ahora podemos porner en nuestro sitio Wordpress, código de la siguiente manera: […]

Gravatar

Nemografica The Blog » Archivo del weblog » Escribir código en Wordpress dijo,

November 11, 2006 @ 2:48 pm

[…] iG:Syntax Hiliter: Mucho más profesional y quizás útil para aquellas personas que quieran colocar gran cantidad de código en una entrada. Lo podéis descargar desde aquí o visitando el post correspondiente en la página web del autor. Si queréis saber cómo instalarlo y ver realmente qué hace podéis visitar este post en Wordpress Maniac. […]

Gravatar

Nemografica » Escribir código en Wordpress dijo,

November 11, 2006 @ 5:26 pm

[…] iG:Syntax Hiliter: Mucho más profesional y quizás útil para aquellas personas que quieran colocar gran cantidad de código en una entrada. Lo podéis descargar desde aquí o visitando el post correspondiente en la página web del autor. Si queréis saber cómo instalarlo y ver realmente qué hace podéis visitar este post en Wordpress Maniac. […]

Gravatar

..: CRISTIAN ESLAVA | Diseño Gráfico / Web | Maquetación | Flash | Multimedia | 3D | Fotografía :.. » Plugin para insertar códigos en Wordpress dijo,

January 8, 2007 @ 3:54 am

[…] ¿Necesitas poner código en tus post? Plugin iG:Syntax Hiliter V 3.5 […]

Gravatar

Javier Gálvez » Blog Archive » Como escribir código en WordPress dijo,

March 22, 2007 @ 12:57 pm

[…] Me traía de cabeza, hasta que encontré en una página de WordPress Maniac como escribir líneas de código en WordPress. Pulsa aquí para ver la página […]

Gravatar

El Blog de René » Blog Archive » Nuevo plugin: IG-Syntax Hiliter dijo,

March 24, 2007 @ 6:52 am

[…] Acabo de instalar un nuevo plugin, IG-Syntax Hiliter, que sirve para poner código en Wordpress y que quede bien a la vista. A ver si no da problemas a la hora de introducir código en los posts. Si se hace clic sobre PLAIN TEXT muestra el texto plano, perfecto para copiar diectamente en un archivo de texto sin formato. […]

Gravatar

Nuevo plugin: IG-Syntax Hiliter - El Blog de René dijo,

May 11, 2007 @ 3:14 am

[…] de instalar un nuevo plugin, IG-Syntax Hiliter, que sirve para poner código en Wordpress y que quede bien a la vista. A ver si no da problemas a […]

Gravatar

iG:Syntax Hiliter compatible para wordpress 2.2 — Viciao2k3 - PHP, 2.0, diseño, musica, software, juegos, TV dijo,

June 23, 2007 @ 11:47 am

[…] instalarlo? En wordpress maniac encontrareis un excelente […]

Gravatar

jose luis dijo,

January 23, 2008 @ 12:58 pm

He instalado el plug-in, lo he activado, se supone que debe funcionar. Cuando pincho en el plug-in para intentar hacer la configuración, no me muestra el menú con las opciones que ajustar, sino que me lleva a la página oficial de iG:Sintax Hiliter.
He instalado código en javascrip pero no me funciona. Me cambia automáticamente el código poniendome delante de cada instrucción, la barra lateral \
Hay alguien que pueda ayudarme?

Gravatar

admin dijo,

January 24, 2008 @ 3:00 am

Hola Jose Luis, mira estás dándo click justamente en el enlace al sitio del creador.
Lo que debes de hacer es ir a “Opciones” (en tu panel de control de wordpress) y ahí buscar la opción “iG:Sintax Hiliter” como se muestra en la tercera imagen que puse arriba ;)

Gravatar

Nicolás dijo,

February 6, 2008 @ 5:01 pm

Excelente plugin, y la explicación está de primera!

Muchisimas gracias =)

Gravatar

Dureitor dijo,

March 4, 2008 @ 11:28 am

Bueno eh estado probrando esto , pero me el mismo error k ah AkUzZeR

y trate de editar la linea 32 pero sale el mismo error haber si me puedes ayudar

Gracias

Gravatar

Dureitor dijo,

March 4, 2008 @ 11:36 am

intente pero tuve los mismos problemas que “AkUzZeR” nose si me podrias ayudar

Gravatar

Plugins Wordpress - psicofxp.com dijo,

April 17, 2008 @ 10:52 am

[…] obtener documentación sobre como adaptarlo a tus necesidades. Por el tema de resaltado de código, acá teneés el que uso yo, está el tutorial de como instalarlo también. […]

Gravatar

Carlos Leopoldo dijo,

June 26, 2008 @ 8:03 pm

Yo después de buscar y probar muchos opté por crear mi propio plugin usando Chili que es una fantastica librería de jQuery: aquí te dejo el enlace de cómo logré resaltar automaticamente el código PHP, CSS, HTML, etc.

Luego lo publicaré para que lo puedan descargar.

R