homefinance blog
Casi todos los blogueros tecnológicos, creador de contenido o desarrollador a veces deben mostrar fragmentos de código destacados en su blog. Esto puede ser un dolor de cabeza en sí. Sin embargo, resaltar una línea o líneas en ese fragmento también puede ser necesaria, y esta característica no es parte de la mayoría de los códigos incorporados. Afortunadamente, hay un complemento de evolución de SyntaxHighLight. Le mostraremos cómo usarlo para mantener el código como limpio y más fácil de leer. Suscríbase a nuestro canal de YouTube sintaxhlighter evolucionado
La instalación y la activación del complemento son simples. Puede encontrarlo en el almacén de complementos WP.org, pero asegúrese de obtener Alex Mills (Viper007Bond). Hay muchos complementos con nombres y características similares, pero sabemos que es confiable y actualizado. Además, viene con un bloque especializado para el editor de Gutenberg. Sin mencionar una serie de parámetros que le permiten personalizar su experiencia, lo que hace nuestra elección para este tipo de tarea.
En el menú Configuración en el tablero de WordPress, encontrará un nuevo artículo llamado SyntaxHightter. Continúe y haga clic en él. Allí, puede ajustar cada pequeña cosa que necesitará para incorporar los fragmentos de código en su sitio de WordPress. SyntaxHighLighter Configuración de configuración de configuración de configuración es relativamente simple. Un elemento especial que nos gusta de este complemento es que obtiene una gran cantidad de personalizaciones sobre cómo se muestra el código en su sitio. Puede agregar clases de CSS al incorporar, ajustar el relleno del número de línea, elegir temas de color, usar pestañas inteligentes y Bobado de palabras y decidir cómo cargar el lenguaje de codificación individual a nivel de sitio. Queremos revelar tres configuraciones especiales que creemos que la mayoría de las personas deberían saber. La versión del complemento, los números de línea y el tamaño de las pestañas primero es qué versión del complemento se carga. Si bien el complemento en sí se actualiza al repositorio, dependiendo de cómo desee mostrar mejor su código, puede elegir entre versiones 2.x y 3.x. Ambos son seguros, sin embargo, cada uno ofrece características específicas que la otra no ofrece (al menos al escribir este artículo). Si los usuarios que copian su código son los más importantes, entonces la versión 3.x funcionará bien. Sin embargo, si el suyo es más para la visualización que la utilidad real, las palabras de embalaje en la versión 2.x pueden ser más adecuadas para usted, ya que evita la necesidad de barras de desfile en fragmentos de código grandes.
Entonces debe mostrar o no los números de línea. Para grandes piezas de código y tutoriales, los números de línea no tienen precio. Sin embargo, cuando tiene fragmentos cortos, no necesita etiquetarlos continuamente como filas 1 y 2. Eliminarlos puede limpiar bastante el aspecto del código. Y luego siempre hay un tamaño de pestaña controvertido. La opción predeterminada es 4, pero puede cambiarla con cualquier número que desee. Incluyendo el valor correcto de 2. (Sí, nos damos cuenta de que no hay un valor correcto. Simplemente nos gustan 2 espacios para filetes). El código y los códigos cortos si se ejecuta en la parte inferior de la configuración de la página, verá una excelente vista previa del código, así como una gran cantidad de parámetros del código corto. Su tiempo se gastaría bien pasando sobre ellos, solo para ver qué puede hacer todo el complemento para resaltar los fragmentos de código. Además, todos los cambios que realizó anteriormente en la forma en que se muestra el código en la configuración anterior se reflejará aquí. Así que asegúrese de presionar el rescate después de cambiar cualquiera de las opciones. Aunque algunas personas no son los mayores fanáticos de los códigos cortos, porque pueden vincularlo con ciertos complementos, creemos que merece usarlas, porque son inteligentes y fáciles de recordar . Si nada más debe recordar dos cosas y el complemento funcionará en el mejor nivel para usted.
o o o … bueno, lo obtienes
[destacado 5-9]
O alguna variación de la misma. Si puedes recordarlos, eres sólido para la mayoría de las cosas para las que usarás el complemento.
Si bien puede usar los identificadores de lenguaje de forma larga, la SyntaxHighLight está bien construida para facilitarle las cosas. Aquí en el blog ET, cada vez que ve un fragmento de código, tenemos un procesador de código corto si solo usamos codent aquí, y está formateado y resaltado. En el Divor o el Editor Classic, puede usar el módulo de texto o el Editor TinyMCE y puede pegar el código entre los códigos cortos. Sugerimos, debido a la forma en que funciona la pestaña visual, use la pestaña de texto para mantener el formato de caracteres especial.
Si eres un usuario de editor de Gutenberg / Block, las cosas son igual de simples. Puede volver a usar el bloque de texto para él. Incluso más fácil que esto es el bloque HTML personalizado. Tal como se indicó anteriormente, pegue el código a etiquetas de código cortos.
Sin embargo, incluso mejor que eso es el bloque de sintaxi evolucionado en sí. Con la instalación del complemento, se incluye su propio bloque Gutenberg, por lo que si no es un código corto y no desea jugar con los parámetros, no tiene que hacerlo. Simplemente encuentre el bloque en el formato e ingrese en su publicación o página.
Independientemente de cómo ingrese el código, verá la misma jugada en la parte delantera de su sitio de WordPress.
Terminando hay muchas razones por las cuales es posible que necesite presentar fragmentos de código a su audiencia. Puede escribir tutoriales o publicar remedios a los problemas habituales que el público toma y usa lo que necesita.Pero a veces una incorporación de GitHub simplemente no da a los usuarios exactamente la experiencia deseada.Entonces debes tener un complemento como SyntaxHighLight Evolution.Con unos pocos clics, una pequeña personalización y un bloque de Gutenberg o un código corto, su audiencia pasará por su código sin ningún problema. ¿Qué usos podría encontrar en su sitio para resaltar el código de este tipo?Imagen presentada por el artículo por Adil Bouyghajden / Shutterstock.com
