Prism
Prism es un resaltador de sintaxis, construido con estándares web modernos. https://prismjs.com/
Código de escape: https://www.freeformatter.com/
- Escapa o elimina el escape de un archivo HTML eliminando rastros de caracteres
- https://www.freeformatter.com/html-escape.html#before-output
Uso de código HTML y el resaltador de sintaxis
Para trabajar con codigo y el resaltador de sintaxis, debemos Seleccionar la opcion "Tema" en blogger, luego "Personalizar"
Elegimos la opción "Editar HTML", al dar clic nos abrirá la plantilla de codigos de nuestro Blog en general. Es aquí donde pegaremos el primer código.
Use los comandos CTRL+F para buscar la etiqueta </head> y pegue el script HTML y la etiqueta de enlace justo encima del </head>
<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
<script type= 'text/javascript' src="http://prismjs.com/prism.js"></script>
Tema que puede usar:
<link rel="stylesheet" href="http://prismjs.com/themes/prism-okaidia.css"/>Las buenas prácticas de creación. Solo funciona con elementos <code>, ya que el marcado de código sin un <code> es semánticamente inválido.
De acuerdo con la especificación HTML5 , la forma recomendada de definir un lenguaje de código es un language-xxxx clase, que es lo que usa Prism.
Alternativamente, Prism también admite una versión más corta: lang-xxxx.
<div class="container" style="margin-top: 20px;">
<pre><code class="language-markup">
Aquí va el código a mostrar en la entrada.
</code></pre>
</div>
Uso básico
Usted tendrá que incluir el prism.css y prism.js Archivos que descargues en tu página. Ejemplo:
<!DOCTYPEhtml>
<html>
<head>
...
<link href="https://prismjs.com/themes/prism.css" rel="stylesheet"/>
</head>
<body>
...
<script src="https://prismjs.com/prism.js"></script>
</body>
</html>
La forma recomendada de marcar un bloque de código
(tanto para la semántica como para Prism) es un <pre>elemento con una <code>elemento interior, como así:
<pre><code class="language-css">p { color: red }</code></pre>Los fragmentos de código en línea se hacen así:
<code class="language-css">p { color: red }</code>
Nota : Tienes que escapar de todo < y & dentro elementos <code> (bloques de códigos y fragmentos en línea) con < y & respectivamente, o de lo contrario el navegador podría interpretarlos como una etiqueta o entidad HTML. Si tienes grandes porciones de código HTML, puedes usar el plugin de marcación Unescaped para trabajar en torno a esto.
Uso con CDNs
En combinación con CDN, recomendamos utilizar el plugin Autoloader que carga automáticamente los idiomas cuando sea necesario.
La configuración del Autoloader, se verá como la siguiente.
<!DOCTYPE html>
<html>
<head>
...
<link href="https://prismjs.com/themes/prism.css" rel="stylesheet"/>
</head>
<body>
...
<script src="https://prismjs.com/components/prism-core.min.js"></script>
<script src="https://prismjs.com/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>Tenga en cuenta que los enlaces de la muestra de código anterior sirven como marcadores de lugares. Tienes que reemplazarlos con enlaces válidos a la CDN de tu elección.