Lista de resaltado para pegar / mostrar el código fuente en WordPress

2018/11/24

Al escribir un artículo de programación e introducir el código fuente, quiero Highlighter, una función que puede mostrar el código de una manera fácil de leer.De hecho, se ha desarrollado tanto que es difícil decidir cuál usar.En este artículo, presentaremos las herramientas para resaltar el código fuente en WordPress y sus características por separado para el tipo de biblioteca, tipo de complemento y servicio web.

Tipo de biblioteca

Resaltador del tipo para cargar el archivo de biblioteca adquirido en la carpeta del tema secundario y usarlo.Es más liviano que un complemento, pero lleva un poco de tiempo instalarlo.

Highlight.js

Una biblioteca de JavaScript llamada Highlight.js. Admite 189 lenguajes de programación y tiene 89 estilos de visualización (a noviembre de 2018).La función es tan simple como resaltar el código.Muy ligero.Popular.

https://highlightjs.org/

Prism.js

Esta es también una biblioteca de JavaScript ligera.Admite 153 idiomas y 8 estilos de visualización (a partir de noviembre de 2018).Como extensión, puede agregar fácilmente números de línea, resaltar líneas específicas, mostrar el idioma, instalar el botón de copia, etc.Esto también es popular.

https://prismjs.com/

Prettify de código de Google

Como su nombre lo indica, una biblioteca de JavaScript desarrollada por Google. Es compatible con los principales lenguajes de programación como C, Python, HTML, CSS, JavaScript, Makefile, pero los lenguajes menores deben ser compatibles con extensiones.Hay 5 estilos de visualización (a partir de noviembre de 2018).Además del método de cargar en una carpeta de WordPress como los dos tipos anteriores y usarlo, existe un método para instalarlo fácilmente usando un autocargador.Hay poca información japonesa porque no hay muchos usuarios.

https://github.com/google/code-prettify

Tipo de complemento

Un tipo distribuido como un complemento gratuito de WordPress.Es muy fácil de implementar y administrar, pero puede hacer que su sitio sea un poco más pesado que otros tipos.En el tipo de biblioteca, puede seleccionar admitir solo el idioma requerido, pero en la versión del complemento, es una imagen con todos los idiomas y todas las funciones.

WP Code Highlight.js

Es una versión de complemento de Highlight.js introducida en el tipo de biblioteca. Compatible con SyntaxHighlighter, Prettify y CrayonSyntaxHighlighter, por lo que también puede migrar desde otros resaltadores.

https://ja.wordpress.org/plugins/wp-code-highlightjs/

Resaltador de sintaxis de prisma

Una versión de complemento de Prism.js.

https://ja.wordpress.org/plugins/ank-prism-for-wp/

Codificar Prettify

Mismo.

https://ja.wordpress.org/plugins/code-prettify/

Resaltador de sintaxis de crayón

Impresión de que hay muchos usuarios y abundante información sobre aperturas en japonés.Incluso los principiantes pueden cambiar fácilmente el tamaño y el diseño de la fuente, agregar números de línea, resaltar, etc., y es muy personalizable.Hay muchas revisiones de que es pesado y es una preocupación que la última actualización se haya detenido desde 2015.

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

Resaltador de sintaxis de Mivhak

Es compatible con más de 130 lenguajes de programación y tiene 36 temas.Parece que los scripts y los temas del lenguaje se cargan bajo demanda desde CSS y JS ligeros, pero parece ser tan pesado como Crayon Syntax Highlighter.Puede especificar el tamaño de fuente solo para la parte del código.

https://ja.wordpress.org/plugins/mivhak/

 

Comparé los efectos de cada complemento en la velocidad de visualización del sitio, así que consulte esto también.

Comparación de la velocidad de visualización del sitio de los complementos Syntax Highlighter

 

 

Tipo de servicio web

Es un tipo de resaltador que se puede resaltar convirtiendo el código fuente en una etiqueta incrustada en la Web y pegando la etiqueta en un editor de texto de Wordpress.

Gist (servicio de GitHub)

Gist es un servicio para compartir código en GitHub. Cuando carga el código en Gist, se emite la etiqueta para mostrar. Es necesario registrarse en GitHub, pero por el contrario, la ventaja es que puede editar y administrar el código en el lado de GitHub (editar con un editor de texto,OEs complicado meterse con etiquetas como).

https://gist.github.com/discover

srctohtml

Puede convertir fácilmente el código en etiquetas HTML para incrustarlo sin registrarse.Los lenguajes admitidos son JavaScript, C ++, PHP y un poco menos.

http://marginalsoft.com/tools/srctohtml/

Cuál elegir

También se dice que qué herramienta usar depende de lo que quieras enfatizar.He resumido brevemente las orientaciones de cada uno, así que consúltelos.También es importante si le importa el diseño a la hora de resaltar.

Tipo de biblioteca Se hace hincapié en la ligereza de funcionamiento y la velocidad de visualización.
Tipo de complemento Énfasis en la facilidad de introducción.
(Algunos complementos no son tan pesados)
Tipo de servicio web Registrado en GitHub (Gist), que está fascinado con la función de administración de código
Personas que tienen pocas oportunidades de insertar (srctohtml)

Por cierto, uso el complemento Mivhak Syntax Highlighter.Es bueno que pueda especificar el tamaño de fuente solo para la parte del código y que pueda operar varias configuraciones de botones en una pantalla de configuración simple.Se ralentiza en el móvil, pero la persona que hace referencia al código probablemente sea de la PC, y creo que ese es el problema.