El día de hoy te enseñaré a mostrar fragmentos de código en tu página web con un excelente Marcador de sintaxis de JavaScript, el cual detecta automáticamente más de 190 lenguajes de programación.
Ingresamos a nuestro panel de MGPanel y nos vamos a configuración.
Estando en configuración bajamos hasta al final en donde encontraremos el campo: Código <head>, allí vamos a colocar el siguiente código:
<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>
Y damos clic a Guardar.
Estando allí en configuración pulsamos sobre la pestaña Código JS y dentro de $(document).ready(function() { }); vamos a colocar la siguiente línea de código:
hljs.highlightAll();
Y damos clic a Guardar.
Vamos ahora a nuestro módulo o contenido donde queramos mostrar el fragmento de código y colocaremos el siguiente código:
<pre>
<code>Aquí el código que queremos mostrar</code>
</pre>
<!-- Si vas a mostrar un fragmento de código HTML reemplaza el signo < por &l t; y el signo > por &g t; -->
Y damos clic a Guardar.
Ve a tu página web y verás que tu código se muestra de una forma amigable y entendible.
De esta forma se verá tu código en tu página web: Ver fragmentos de código en página web.
A partir de este punto ya con solo aplicar el Paso 4 en los diferentes módulos o contenidos podrás mostrar fragmentos de tu código como todo un profesional.
Ahora en caso de que requieras mostrar fragmentos de tu código en el blog no será necesario que apliques los pasos anteriores, ya que el editor integrado para la creación de post de MGPanel tiene este marcador de sintaxis integrado.
En próximos post te daremos otros consejos para que los apliques en este nuevo CMS para programadores, también iremos construyendo secciones de sitios web y otros trucos que queremos compartir contigo.
O si quieres especializarte en programación web dale un vistazo a nuestro Máster en programación web desde cero.
O también puedes visitar nuestro canal de YouTube, donde tenemos tutoriales y clases grabadas de como crear páginas web de forma rápida y sencilla.
Nos vemos en un próximo post,
Wilmer Silva
Fuente: https://highlightjs.org/
Director de proyecto de MGPanel.
Una de las maravillas del CSS es que podemos hacer que los textos se vean tan espectaculares como si los hubiéramos hecho con Photoshop
Por otro lado CSS es lo que se denomina lenguaje de hojas de estilo en cascada y se usa...
Descubre todo sobre el margin en CSS: aprende a usar esta propiedad fundamental para crear espacios entre los elementos de tu diseño web de manera efectiva y profesional.
Aprende como ocultar elementos con css en tres pasos...