Pero no te preocupes!
En este post, obtendrá soluciones para agregar fragmentos de código en la publicación de Blogger, código CSS para formatear su bloque de código y el enlace de herramientas en línea (generador de fragmentos de código html) que ayuda a convertir los fragmentos de código en caracteres HTML.
Siguiendo esta guía, puedes agregar fragmentos de código en el post de Blogger con un estilo perfecto. Puede agregar HTML, JavaScript, CSS, Python o cualquier otro fragmento de código de muestra.
Agreguemos fragmentos de código en la publicación de Blogger con un estilo perfecto.
How to encode HTML character in code snippets for Blogger post?
A continuación, se muestran dos formas de codificar caracteres HTML en fragmentos de código. Aquí, se sugiere la herramienta codificadora HTML en línea para principiantes.
Herramienta de codificación HTML (recomendada)
Para los principiantes, el proceso manual para generar fragmentos de código para HTML puede resultar confuso y complejo. En ese caso, puede probar las herramientas de codificación HTML en línea.
Por ejemplo, mira esto: HTML encoder/decoder tool
Al usar estas herramientas de codificación HTML en línea, puede formatear (escapar) rápidamente los caracteres HTML de sus fragmentos de código y usarlos en el contenido de su post.
Esta herramienta de codificación convierte todos los caracteres HTML en una forma apta para ponerlos en post de Blogger.Y sus fragmentos de codigo funcionarán.
Cómo agregar estilos de bloques de código de CSS o JS o HTML personalizada en Blogger?
Si agrega fragmentos de código en las publicaciones de Blogger sin ningún estilo, se mostrará en estilo normal como el resto del contenido de la publicación. Ahora, para hacer que sus fragmentos de código sean diferentes del contenido normal de una publicación, puede usar dos soluciones.
1. Agregue CSS personalizado al blog de Blogger para obtener fragmentos de código 2. Usar la biblioteca JavaScript del resaltador de sintaxis de código en el blog de Blogger
Veamos ambas opciones una por una:
1. Agregue CSS personalizado al blog de Blogger para obtener fragmentos de código
Agrega el siguiente código CSS en tu plantilla de Blogger.
1.1 Vaya a Blogger > Plantilla > Editar HTML. Coloque CSS a continuación, justo encima del código ]]></b:skin>
/* Code Sniped Black */
.pre-code-block{
padding:10px;
border:1px solid #444;
background-color:#444;
color:#fff;
overflow-x:scroll;
overflow:auto;
}
Use el de cuadro de código (code box) en su publicación:
Ahora, después de agregar el codigo CSS de bloque de código en su blog de Blogger, puede usarlo en su publicación con fragmentos de código. A continuación se muestra el codigo HTML que debe utilizar en su post.
<pre class="pre-code-block">
// TU CODIGO PARA MOSTRAR AQUI
</pre>
Aquí está el resultado de fragmento de código (Code Box) en su publicación de Blogger.
// TU CODIGO PARA MOSTRAR AQUI
2. Utilice la biblioteca JavaScript del resaltador de sintaxis de código en el blog de Blogger.
Para dar un aspecto más profesional a sus fragmentos de código, puede utilizar la biblioteca JS del resaltador de sintaxis. En este método, debe incluir bibliotecas de resaltado de sintaxis JS y archivos CSS. A continuación, se muestran los pasos para utilizar cualquier biblioteca JS de resaltador de sintaxis en el blog de Blogger -highlighter.js
1. Busque y elija una buena biblioteca JS (por ejemplo, biblioteca (highlighter.js)
2. Lea la documentación de uso correctamente.
3. Las bibliotecas proporcionan código para incluir archivos JS y CSS.
4. Pega los codigos JS y CSS en la <head> de tu plantilla Blogger.
5. Next, also add library initialize code line after file include code.
6. Now, use the library with your code snippets as per documented example.
3. Cómo agregar un Code Box con estilos en línea en una publicación de Blogger?
Esto es algo nuevo y un método sencillo para agregar Code Box en la publicación de Blogger. Con este método, puede prepararse para usar código HTML que funciona directamente en una publicación de Blogger.
A continuación se muestran dos buenas herramientas en línea que convierten su código en un formato HTML bastante aceptable.
hilite.me
highlight.hohli.com
En estas herramientas en línea, necesitas elejir el estilo del Code Box y el idioma para codificar. Después de eso, una vez que envíe el formulario, estará listo para comenzar. Código HTML final disponible en la página, puedes usarlo en tu publicación sin ningún cambio.
some code
your code goes here
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Letakkan code yang Anda inginkan di sini</div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #87CEFA; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Letakkan code yang Anda inginkan di sini</div>
<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>
<div style="background-color: #f3f3f3; border-left: 10px solid #2288dd; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>
Script di sini...
Script di sini...
3. Soft
Script di sini...
4. Gradient
Script di sini...
Script di sini...
Script di sini...
Script di sini...