Mostrar código en un post con Prettifier

jiestevez abril 21, 2020
Cómo mostrar código en un post y diferenciarlo del resto del contenido con Prettifier. neo 2.0 - Mostrar código en un post con prettifier

Si necesitas compartir código en tus posts, y quieres mostrarlo de forma que se diferencie del resto del contenido, a través de Prettifier podrás hacerlo de una forma muy simple.

Lo primero será añadir el script en todas tus páginas donde desees emplearlo o editando la platilla de tu tema.

Añádelo entre las etiquetas <head> </head>:

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>

Además, podrás elegir entre las siguientes plantillas:

Default

<!doctype html>
<html>
<head>
<title>HTML Test</title>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style type="text/css">
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Desert

<!doctype html>
<html>
<head>
<title>HTML Test</title>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style type="text/css">
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Sunburst

<!doctype html>
<html>
<head>
<title>HTML Test</title>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style type="text/css">
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Sons-Of-Obsidian

<!doctype html>
<html>
<head>
<title>HTML Test</title>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style type="text/css">
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Doxy

<!doctype html>
<html>
<head>
<title>HTML Test</title>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style type="text/css">
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

Pincha en el nombre del tema que te guste en Gallery of themes for code prettify, copia los estilos CSS y añádelos a tu hoja de estilos.

Ahora cuando quieras mostrar código en uno de tus post, tan solo tendrás que envolverlo entre las etiquetas <pre class="prettyprint"> Tu código aquí </pre>

 Tu código aquí

Publicar un comentario

0 Comentarios