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?

The default color theme is A11y Dark optimized for accessibility. If you want to change the colorscheme, you can select in the editor from a few different themes shipped with the plugin. You can also use a theme from the Prism themes repo or create your own.

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 usará si existe. Añade tu archivo personalizado en esa ubicación y será usado.

  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

27 de noviembre de 2020
Simple and easy to use
25 de septiembre de 2020
The beauty of this plugin is that it blends extremely well with the Gutenberg Code block. Simply install the plugin and select the language for the code blocks in your posts. That's it!
12 de septiembre de 2020
Works perfectly and it is beautifully integrated into the native code block.
21 de agosto de 2020
I've tried many other plugins but they are not fully customizable with all languages and then I want to use prism.js but this plugin does all of that, just love it the way it works out of the box without extra setup. Thanks to the Plugin Author.
13 de agosto de 2020
This is a great plugin. I've testing it in towo of my sites and works great. Filters are working just fine, so I can preselect PHP language for me. Thans million for your work!!
10 de agosto de 2020
It may lack options, but it looks great, and supports plenty of languages, and styles.. Its also very easy to use out of the box, so 5 stars!
Leer todas las 24 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 4 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

2.0.1

Fix alignment with Twenty Twenty theme

2.0.0

Upgrade Prism to 1.22
Add Color Scheme options
Fix for WP 5.6 / GB 9.2

1.3.6

Update Prism language components
Adds new language support

1.3.5

Add Rust to default language list
Fix CSS issue with title
Upgrade Prism to 1.21

1.3.4

Fix setting default language using filter.

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