Code Syntax Block

Descripción

Code Syntax Block amplía el editor de bloques de WordPress añadiendo compatibilidad con resaltado de sintaxis al bloque de código del núcleo usando el resaltador de sintaxis Prism.

El resaltador de sintaxis Prism ejecuta el JavaScript cargado en la portada para analizar los bloques de código y aplicar el marcado de sintaxis. Un archivo CSS especifica el color y estilo para aplicar a ese marcado. Mira Prism syntax highlighter para más detalles.

Desarrollo principal y problemas en seguimiento en GitHub: https://github.com/mkaz/code-syntax-block

Capturas

  • Ejemplo de resaltado de sintaxis
  • Ejemplo en el editor

Instalación

Después de instalar y activar el plugin, úsalo en el editor de bloques creando un bloque estándar de código y eligiendo un formato de lenguaje.

Al crear un nuevo bloque de código, selecciona el bloque de código, y entonces en el inspector (controles del bloque a la derecha) elige el lenguaje para el código. El código no cambiará en el editor, pero verás una pequeña etiqueta con el lenguaje elegido.

Cuando se está viendo la entrada en portada el código tendrá resaltados de sintaxis coloreado.

FAQ

¿Qué lenguajes son compatibles?

El plugin Code Syntax Block usa el plugin de carga automática de Prism para ser compatible con todos los lenguajes compatibles con Prism. Mira en lista de lenguajes compatibles.

¿Cómo personalizar el esquema de color?

El tema de color por defecto es One Dark basado en el tema One Dark de Atom.Si quieres cambiar los colores, puedes descargar un tema nuevo desde el repositorio de temas de Prism o crear el tuyo.

El tema de color es un único archivo CSS, hay un par de formas de personalizarlo:

  1. El plugin comprobará en el tema actual el archivo: assets/prism/prism.css y lo utilizará si existe. Añade tu personalización a un archivo en esa localización, y se utilizará.

  2. Si no te gusta la localización de este archivo, puedes usar el filtro mkaz_prism_css_path y especificar una ruta relativa al tema que usas.

  3. Si prefieres especificar una URL completa, puedes usar el filtro mkaz_prism_css_url y especificar una URL completa a la hoja de estilos que usas.

Un ejemplo añadiendo un filtro para cambiar la URL, añade lo siguiente al archivo «functions.php» de tu tema

add_filter( 'mkaz_prism_css_url', function() {
    return 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-hopscotch.css';
});

Nota: si usas la característica título/nombre de archivo y personalizas el CSS, necesitarás aplicar tu propio estilo coincidiendo con la clase `prism-titlename`.

¿Cómo personalizar la lista de lenguajes?

Usa el filtro mkaz_code_syntax_language_list para personalizar la lista de lenguajes mostrados en el editor. Por defecto, Code Syntax Block muestra una lista más corta de lenguajes populares, pero Prism es compatible con casi 200, mira la lista.

Usa este filtro para ampliar la compatibilidad con los lenguajes que necesitas. Además, puedes usar el filtro para acortar la lista a los lenguajes que sueles utilizar para que sea más fácil seleccionarlos.

Aquí tienes un ejemplo acortando la lista a un conjunto más pequeño:

add_filter( 'mkaz_code_syntax_language_list', function() {
    return array(
        "bash" => "Bash",
        "go" => "Go",
        "html" => "HTML",
        "javascript" => "JavaScript",
        "json" => "JSON",
        "markdown" => "Markdown",
        "php" => "PHP",
        "python" => "Python",
        "jsx" => "React JSX",
        "sass" => "Sass",
        "sql" => "SQL",
        "svg" => "SVG",
        "toml" => "TOML",
        "vim" => "vim",
        "xml" => "XML",
        "yaml" => "YAML",
    );
} );

¿Puedo establecer un lenguaje por defecto de forma que no tenga que seleccionarlo cada vez?

Sí, usa el filtro mkaz_code_syntax_default_lang para establecer un lenguaje por defecto al insertar un bloque de código. Siempre puedes cambiarlo si no deseas mostrar el código usando el lenguaje por defecto.

Este ejemplo establecerá JavaScript como el lenguaje por defecto:

add_filter( 'mkaz_code_syntax_default_lang', function() { return 'javascript'; });

Can I override the conditional loading, so assets always load?

Yes, use the filter mkaz_code_syntax_force_loading to force always loading assets, otherwise it users has_block to check.

Example:

add_filter( 'mkaz_code_syntax_force_loading', '__return_true' );

Reseñas

10 de mayo de 2020
Great syntax highlighter plugin. It works like described. The language selector option is nice and we can set default language using filter hook.
5 de abril de 2020
A very simple and intuitive plug-in without unnecessary frills. Thanks to the developer.
24 de marzo de 2020
The plugin does what it's supposed to do and is easy to customize. Great work.
Leer todas las 17 reseñas

Colaboradores y desarrolladores

«Code Syntax Block» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Code Syntax Block» ha sido traducido a 2 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce «Code Syntax Block» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.3.3

Fix block validation error for user roles with restricted permissions.

1.3.2

Fix issue with PHP warning when no posts

1.3.1

Fix compatibility issue with Gutenberg plugin 7.9
Removes in editor syntax preview added in 1.3.0

1.3.0

Upgrade Prism to 1.19
Add syntax preview in editor

1.2.4

Add filter to force loading assets, regardless of has_block

1.2.3

Conditionally load asset if has_blocks
Move Hack to front of default font list
Remove !important from font declaration
Change default font size to 15px for usability

1.2.2

Corregir problema de alineamiento con TwentyTwenty

1.2.1

Añadir Java y Kotlin a la lista de lenguajes por defecto

1.2.0

Actualizar Prism a 1.17.1

1.1.0

Añade filtros para personalizar la lista de lenguajes, y el lenguaje por defecto.

Mira las notas de versión completas en la página de versiones de Github