¿Quieres mostrar tu código de forma profesional en tu sitio web?
En este tutorial aprenderás a mostrar y resaltar fragmentos de código en tu página web usando Highlight.js, una librería ligera que detecta automáticamente más de 190 lenguajes.
Paso 1
Ingresamos a nuestro panel de MGPanel y nos vamos al módulo de Editar Web.
Paso 2
Estando en el módulo de Editar Web daremos clic en Archivo -> Código General, aquí debes agregar las librerías necesarias para activar el resaltado de sintaxis:
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/monokai-sublime.min.css'>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js'></script>
<script>
$(document).ready(function() {
hljs.highlightAll();
})
</script>Y damos clic a Guardar.
Paso 3
Dentro del módulo de Editar Web seleccionamos la página donde queremos implementar esta función y ahora inserta tu fragmento de código dentro de las etiquetas <pre> y <code> para que Highlight.js pueda procesarlo:
<pre>
<code>
// Mostrando código JS
document.addEventListener('DOMContentLoaded', function() {
alert('¡La página ha cargado correctamente!');
});
</code>
</pre>Y damos clic a Guardar.
Al visualizar la página notarás que tu código aparece con colores y formato profesional, listo para compartirlo con tus usuarios.
Puedes ver el código completo aquí.
Con estos simples 3 pasos podrás mostrar fragmentos de tu código como todo un profesional en las páginas donde lo requieras.
En próximos artículos compartiremos más guías, buenas prácticas y trucos para que sigas potenciando tus proyectos en MGPanel, también iremos construyendo secciones de sitios web y otros trucos que queremos compartir contigo.
Nos vemos en un próximo artículo,
Wilmer Silva - Web Solutions Developer