Title: Syntax-highlighting Code Block (with Server-side Rendering) Author: Weston Ruter Published: 30 de julio de 2019 Last modified: 30 de noviembre de 2025 --- Buscar plugins ![](https://ps.w.org/syntax-highlighting-code-block/assets/banner-772x250.png?rev =3406002) ![](https://ps.w.org/syntax-highlighting-code-block/assets/icon.svg?rev=3406002) # Syntax-highlighting Code Block (with Server-side Rendering) Por [Weston Ruter](https://profiles.wordpress.org/westonruter/) [Descargar](https://downloads.wordpress.org/plugin/syntax-highlighting-code-block.1.5.1.zip) * [Detalles](https://es-co.wordpress.org/plugins/syntax-highlighting-code-block/#description) * [Valoraciones](https://es-co.wordpress.org/plugins/syntax-highlighting-code-block/#reviews) * [Desarrollo](https://es-co.wordpress.org/plugins/syntax-highlighting-code-block/#developers) [Soporte](https://wordpress.org/support/plugin/syntax-highlighting-code-block/) ## Descripción Este plugin extiende el bloque de código del núcleo de WordPress para agregar resaltado de sintaxis que se renderiza en el servidor. Los bloques de código preexistentes en un sitio se extienden automáticamente para incluir el resaltado de sintaxis. Realizar el resaltado de sintaxis en el servidor elimina la necesidad de cargar cualquier JavaScript en el frontend (por ejemplo, Highlight.js o Prism.js), lo que garantiza que no haya un flash de código sin resaltar (¿FOUC?). Reducir los scripts en el frontend mejora el rendimiento del mismo y también permite que el código con resaltado de sintaxis aparezca correctamente en las páginas AMP, tal como las renderiza el [plugin oficial de AMP](https://amp-wp.org) (consulta también [ampproject/amp-wp#972](https://github.com/ampproject/amp-wp/issues/972)), o cuando el JavaScript está desactivado en el navegador. Este bloque de código extendido utiliza la detección automática de lenguaje para agregar resaltado de sintaxis, pero puedes sobrescribir el lenguaje en la barra lateral de configuración del bloque. (Actualmente, no hay resaltado de sintaxis del bloque de código en el editor, pero consulta el [problema #8](https://github.com/westonruter/syntax-highlighting-code-block/issues/8).) El plugin es compatible con todos los [lenguajes de programación](https://highlightjs.org/static/demo/) que soporta [highlight.php](https://github.com/scrivo/highlight.php) (una adaptación de [highlight.js](https://highlightjs.org/)). El bloque de código también se extiende para permitir especificar líneas a resaltar, que se marcan con elementos `mark` ( incluido en feeds RSS). Además, hay una casilla de verificación para mostrar u ocultar los números de línea en el frontend (los números no son seleccionables). Por último, dado que hay inconsistencias entre temas en cuanto a si las líneas de un bloque de código deben envolverse, este plugin agrega estilos para evitar el ajuste de línea por defecto, con una casilla de verificación para activar el ajuste cuando se desee. Para uso avanzado, por favor ve la [wiki del plugin](https://github.com/westonruter/syntax-highlighting-code-block/wiki). Este plugin se [desarrolla en GitHub](https://github.com/westonruter/syntax-highlighting-code-block). Consulta la [lista de problemas actuales](https://github.com/westonruter/syntax-highlighting-code-block/issues) del plugin. Siéntete libre de reportar cualquier problema adicional o solicitud que encuentres. Las [pull requests](https://github.com/westonruter/syntax-highlighting-code-block/pulls) son bienvenidas. Consulta la [información para contribuir](https://github.com/westonruter/syntax-highlighting-code-block/wiki/Contributing). #### Créditos Este es un fork de [Code Syntax Block](https://github.com/mkaz/code-syntax-block) de [Marcus Kazmierczak](https://mkaz.blog/) (mkaz), que también está [disponible en WordPress.org](https://wordpress.org/plugins/code-syntax-block/). Copyright (c) 2018 Marcus Kazmierczak. Licenciado bajo GPL 2.0 o posterior. [highlight.php](https://github.com/scrivo/highlight.php) es lanzado bajo la licencia BSD 3-Clause. Copyright © 2006-2013, Ivan Sagalaev (maniac@softwaremaniacs.org), highlight.js (autor original). Copyright © 2013, Geert Bergman (geert@scrivo.nl), highlight.php ## Capturas * [[ * Los bloques de código se pueden agregar del modo usual, anulando opcionalmente el idioma auto-detectado. También especifica cualquier línea que deba ser destacada, si se deben mostrar los números de las línea, y que líneas deben ser cerradas. * [[ * El bloque de código se renderiza con resaltado de sintaxis en el frontend sin necesidad de cargar ningún JavaScript. Las hojas de estilo se añaden solo cuando el bloque está presente en la página. ## Reseñas ![](https://secure.gravatar.com/avatar/81d6cd29d711b1b8f768e3f31b7493de331a70168494303d83b73c2dbeca125c? s=60&d=retro&r=g) ### 󠀁[code block is not 100% of wp users bro](https://wordpress.org/support/topic/code-block-is-not-100-of-wp-users-bro/)󠁿 [audioscavenger](https://profiles.wordpress.org/audioscavenger/) 11 de abril de 2024 no one wants to conduct a real study to see how many of use hate the code block. ![](https://secure.gravatar.com/avatar/8a93e92ac024cb0f2b659dc8fd82d168193e82f0fd94ba830f79ae69f3bbc96e? s=60&d=retro&r=g) ### 󠀁[Very good job!](https://wordpress.org/support/topic/very-good-job-83/)󠁿 [Salvatore Noschese](https://profiles.wordpress.org/salvatorenoschese/) 3 de junio de 2023 1 respuesta missed just a download and/or copy button. also for theme, maybe is best to update“ usage instruction”! only after some search I understood can be changed via customized menu. anyway, looks so good. ty. ![](https://secure.gravatar.com/avatar/6ac7c2e9bb1e43d09d87b780c06c09b391a52680c3b1512bcd094176376a1a26? s=60&d=retro&r=g) ### 󠀁[This works nicely.](https://wordpress.org/support/topic/this-works-nicely/)󠁿 [OllieJones](https://profiles.wordpress.org/olliejones/) 25 de mayo de 2023 Thanks for this. It’s really nice. ![](https://secure.gravatar.com/avatar/5c6cbac107c132c57a2bb2d7a5f8b0c31d899519c58ea4b22f62eb718541afce? s=60&d=retro&r=g) ### 󠀁[Nice plugin, thank you !](https://wordpress.org/support/topic/nice-plugin-thank-you-16/)󠁿 [Marie Comet](https://profiles.wordpress.org/chaton666/) 4 de noviembre de 2022 Works great, thanks ! ![](https://secure.gravatar.com/avatar/fc29a040754a796607f46a128e6b54e53d1491994ec3326df3ef015c23bb8f37? s=60&d=retro&r=g) ### 󠀁[It’s time to switch to get more performance!](https://wordpress.org/support/topic/its-time-to-switch-to-get-more-performance/)󠁿 [Gwyneth Llewelyn](https://profiles.wordpress.org/gwynethllewelyn/) 13 de julio de 2022 1 respuesta I confess, I’ve been a happy user of Code Syntax Block for quite a while — a plugin which the author, Weston Router, clearly states that Syntax Highlighting (Code Block) is based upon. Alas, however, all the pages I had with the older plugin would suffer from an inevitable rendering slowdown — there is so much Javascript on web pages these days that such a slowdown is inevitable, and this is especially true to those scripts that attempt to recognise the language automatically — something that will consume plenty of CPU cycles on the browser. Parsing the language is also no mean feature by itself (I know, I’ve been doing some experiments for some code editors, and, believe me, it’s tough!). So why force the end-user to bear the burden of all that work? It makes much more sense to pre-render everything on the server, and then let the web server send the already-parsed HTML from its cache. That way, the end-user will already have everything on their browser, no need to wait for parsing! Also, if you ‘forget’ to set the language that your code is in (it happens…), the auto-detecting feature will only run on the server, and just once, when you save the post you’re writing. Even if it takes a fraction of a second more to save, think of how much time all those users will save when they get the already-rendered page! So, this plugin is definitely recommended. As a bonus: if you are already using some sort of code block on your WP setup, once you turn off whatever plugin you were using, Syntax Highlighting (Code Block) will immediately pick it up and start its magic (you might need to open and save all the pages you’ve got code on, though— I’m not quite sure if that’s really the case). That means zero effort (beyond saving)— what you already had will continue to work. And, naturally enough, when you disable this plugin, your code block will just revert to the internal WP code block instead— nothing will be ‘lost’ that way! If you’re still hesitant and reading this to the end… while you wasted your time here, think of how many of your users would have saved their time if you already had this plugin installed 🙂 ![](https://secure.gravatar.com/avatar/32d51f2a4043c936cd42663e3917116ce03a1b8f8d128e5df657e40aa3941716? s=60&d=retro&r=g) ### 󠀁[Muy bueno!](https://wordpress.org/support/topic/muy-bueno-752/)󠁿 [diegoamorin](https://profiles.wordpress.org/diegoamorin/) 19 de abril de 2022 No agrega bloques nuevos a WordPress, ya que potencia el bloque de código existente. Soporta gran cantidad de Lenguajes, puedes mostrar líneas y marcar ciertas partes del código. ¡Vaya todo lo que necesito! Y no hay que configurar nada! [ Leer todas las 26 reseñas ](https://wordpress.org/support/plugin/syntax-highlighting-code-block/reviews/) ## Colaboradores y desarrolladores «Syntax-highlighting Code Block (with Server-side Rendering)» es un software de código abierto. Las siguientes personas han colaborado con este plugin. Colaboradores * [ Weston Ruter ](https://profiles.wordpress.org/westonruter/) * [ Vladimir Jimenez ](https://profiles.wordpress.org/allejo/) «Syntax-highlighting Code Block (with Server-side Rendering)» ha sido traducido a 9 idiomas locales. Gracias a [los traductores](https://translate.wordpress.org/projects/wp-plugins/syntax-highlighting-code-block/contributors) por sus contribuciones. [Traduce «Syntax-highlighting Code Block (with Server-side Rendering)» a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/syntax-highlighting-code-block) ### ¿Interesado en el desarrollo? [Revisa el código](https://plugins.trac.wordpress.org/browser/syntax-highlighting-code-block/), echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/syntax-highlighting-code-block/) o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/syntax-highlighting-code-block/) por [RSS](https://plugins.trac.wordpress.org/log/syntax-highlighting-code-block/?limit=100&mode=stop_on_copy&format=rss). ## Registro de cambios Para la bitácora de cambios del plugin, por favor, consulta [la página de versiones en GitHub](https://github.com/westonruter/syntax-highlighting-code-block/releases). ## Meta * Versión **1.5.1** * Última actualización **hace 4 meses** * Instalaciones activas **1.000+** * Versión de WordPress ** 6.6 o superior ** * Probado hasta **6.9.4** * Versión de PHP ** 7.4 o superior ** * Idiomas * [English (US)](https://wordpress.org/plugins/syntax-highlighting-code-block/), [French (France)](https://fr.wordpress.org/plugins/syntax-highlighting-code-block/), [German](https://de.wordpress.org/plugins/syntax-highlighting-code-block/), [German (Switzerland)](https://de-ch.wordpress.org/plugins/syntax-highlighting-code-block/), [Norwegian (Bokmål)](https://nb.wordpress.org/plugins/syntax-highlighting-code-block/), [Spanish (Chile)](https://cl.wordpress.org/plugins/syntax-highlighting-code-block/), [Spanish (Colombia)](https://es-co.wordpress.org/plugins/syntax-highlighting-code-block/), [Spanish (Mexico)](https://es-mx.wordpress.org/plugins/syntax-highlighting-code-block/), [Spanish (Spain)](https://es.wordpress.org/plugins/syntax-highlighting-code-block/) y [Spanish (Venezuela)](https://ve.wordpress.org/plugins/syntax-highlighting-code-block/). * [Traducir a tu idioma](https://translate.wordpress.org/projects/wp-plugins/syntax-highlighting-code-block) * Etiquetas * [block](https://es-co.wordpress.org/plugins/tags/block/)[code](https://es-co.wordpress.org/plugins/tags/code/) [code highlighting](https://es-co.wordpress.org/plugins/tags/code-highlighting/) [code syntax](https://es-co.wordpress.org/plugins/tags/code-syntax/)[syntax highlight](https://es-co.wordpress.org/plugins/tags/syntax-highlight/) * [Vista avanzada](https://es-co.wordpress.org/plugins/syntax-highlighting-code-block/advanced/) ## Valoraciones 5 de 5 estrellas. * [ 26 valoraciones de 5 estrellas ](https://wordpress.org/support/plugin/syntax-highlighting-code-block/reviews/?filter=5) * [ 0 valoraciones de 4 estrellas ](https://wordpress.org/support/plugin/syntax-highlighting-code-block/reviews/?filter=4) * [ 0 valoraciones de 3 estrellas ](https://wordpress.org/support/plugin/syntax-highlighting-code-block/reviews/?filter=3) * [ 0 valoraciones de 2 estrellas ](https://wordpress.org/support/plugin/syntax-highlighting-code-block/reviews/?filter=2) * [ 0 valoraciones de 1 estrellas ](https://wordpress.org/support/plugin/syntax-highlighting-code-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/syntax-highlighting-code-block/reviews/#new-post) [Ver todos los comentarios](https://wordpress.org/support/plugin/syntax-highlighting-code-block/reviews/) ## Colaboradores * [ Weston Ruter ](https://profiles.wordpress.org/westonruter/) * [ Vladimir Jimenez ](https://profiles.wordpress.org/allejo/) ## Soporte ¿Tienes algo que decir? ¿Necesitas ayuda? [Ver el foro de soporte](https://wordpress.org/support/plugin/syntax-highlighting-code-block/)